Added loading animation

bento-platform · Jan 30, 2025 · 7e4fba8 · 7e4fba8
1 parent 7411687
commit 7e4fba8
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/js/components/Search/IndividualsAccordionPane.tsx b/src/js/components/Search/IndividualsAccordionPane.tsx
@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
 import { useAppDispatch, useAppSelector, useTranslationFn } from '@/hooks';
-import type { DescriptionsProps } from 'antd';
-import { Descriptions } from 'antd';
+import { Descriptions, DescriptionsProps, Skeleton } from 'antd';
 
 import { makeGetIndividualData } from '@/features/search/makeGetIndividualData.thunk';
 import { EM_DASH } from '@/constants/contentConstants';
@@ -15,6 +14,7 @@ const IndividualsAccordionPane = ({ id }: { id: string }) => {
   }, [dispatch, id]);
 
   const individualData = useAppSelector((state) => state.query.individualDataCache[id]);
+  const isFetchingIndividualData = useAppSelector((state) => state.query.isFetchingIndividualData[id]);
 
   const items: DescriptionsProps['items'] = [
     {
@@ -45,7 +45,7 @@ const IndividualsAccordionPane = ({ id }: { id: string }) => {
     },
   ];
 
-  return <Descriptions items={items} />;
+  return isFetchingIndividualData ? <Skeleton active /> : <Descriptions items={items} />;
 };
 
 export default IndividualsAccordionPane;