add AsyncResource to handle error states

equinor · Apr 24, 2024 · 5fc2b96 · 5fc2b96
1 parent 3b5f89d
commit 5fc2b96
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 10 deletions.
diff --git a/src/components/graph/adGroups.tsx b/src/components/graph/adGroups.tsx
@@ -1,4 +1,4 @@
-import { CircularProgress, Typography } from '@equinor/eds-core-react';
+import { Typography } from '@equinor/eds-core-react';
 import { debounce } from 'lodash';
 import * as PropTypes from 'prop-types';
 import { ActionMeta, CSSObjectWithLabel, OnChangeValue } from 'react-select';
@@ -10,6 +10,7 @@ import {
   useGetAdGroupsQuery,
 } from '../../store/ms-graph-api';
 import { UnknownADGroupsAlert } from '../component/unknown-ad-groups-alert';
+import AsyncResource from '../async-resource/async-resource';
 
 type DisplayAdGroups = AdGroup & { deleted?: boolean };
 
@@ -73,12 +74,8 @@ export function ADGroups({
     (adGroupId) => !groupsInfo?.some((adGroup) => adGroup.id === adGroupId)
   );
 
-  return state.isLoading ? (
-    <>
-      <CircularProgress size={24} /> Updating…
-    </>
-  ) : (
-    <>
+  return (
+    <AsyncResource asyncState={state}>
       <AsyncSelect
         isMulti
         name="ADGroups"
@@ -120,7 +117,7 @@ export function ADGroups({
           unknownADGroups={unknownADGroups}
         ></UnknownADGroupsAlert>
       )}
-    </>
+    </AsyncResource>
   );
 }
 

diff --git a/src/components/page-configuration/overview.tsx b/src/components/page-configuration/overview.tsx
@@ -9,6 +9,7 @@ import * as PropTypes from 'prop-types';
 import { Alert } from '../alert';
 import { useGetAdGroupsQuery } from '../../store/ms-graph-api';
 import { UnknownADGroupsAlert } from '../component/unknown-ad-groups-alert';
+import AsyncResource from '../async-resource/async-resource';
 
 interface Props {
   adGroups?: Array<string>;
@@ -45,7 +46,7 @@ export function Overview({ adGroups, appName }: Props) {
                   <CircularProgress size={24} /> Updating…
                 </>
               ) : (
-                <>
+                <AsyncResource asyncState={state}>
                   <List className="grid grid--gap-small">
                     {data?.map(({ id, displayName }) => (
                       <List.Item key={id}>
@@ -65,7 +66,7 @@ export function Overview({ adGroups, appName }: Props) {
                       unknownADGroups={unknownADGroups}
                     ></UnknownADGroupsAlert>
                   )}
-                </>
+                </AsyncResource>
               )}
             </>
           ) : (