Merge donations graph loading skeletons

CruGlobal · Mar 15, 2024 · da83800 · da83800
1 parent 5003546
commit da83800
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 27 deletions.
diff --git a/src/components/Contacts/ContactDetails/ContactDonationsTab/ContactDonationsTab.tsx b/src/components/Contacts/ContactDetails/ContactDonationsTab/ContactDonationsTab.tsx
@@ -43,8 +43,8 @@ const DonationsTab = styled(Tab)(({ theme }) => ({
   '&:hover': { opacity: 1 },
 }));
 
-const ContactDonationsLoadingPlaceHolder = styled(Skeleton)(({ theme }) => ({
-  width: '100%',
+const PartnershipInfoLoadingPlaceHolder = styled(Skeleton)(({ theme }) => ({
+  width: '20em',
   height: '24px',
   margin: theme.spacing(2, 0),
 }));
@@ -78,10 +78,9 @@ export const ContactDonationsTab: React.FC<ContactDonationsProp> = ({
       contactId: contactId,
     },
   });
-  const donorAccountIds =
-    data?.contact.contactDonorAccounts.nodes.map(
-      (donor) => donor.donorAccount.id,
-    ) ?? [];
+  const donorAccountIds = data?.contact.contactDonorAccounts.nodes.map(
+    (donor) => donor.donorAccount.id,
+  );
 
   const { t } = useTranslation();
 
@@ -96,21 +95,11 @@ export const ContactDonationsTab: React.FC<ContactDonationsProp> = ({
   };
   return (
     <ContactDonationsContainer>
-      {loading ? (
-        <>
-          <ContactDonationsLoadingPlaceHolder />
-          <ContactDonationsLoadingPlaceHolder />
-          <ContactDonationsLoadingPlaceHolder />
-        </>
-      ) : (
-        <DonationsGraph
-          accountListId={accountListId}
-          donorAccountIds={donorAccountIds}
-          convertedCurrency={
-            data?.contact.lastDonation?.amount.convertedCurrency ?? ''
-          }
-        />
-      )}
+      <DonationsGraph
+        accountListId={accountListId}
+        donorAccountIds={donorAccountIds}
+        convertedCurrency={data?.contact.lastDonation?.amount.convertedCurrency}
+      />
       <TabContext value={selectedDonationTabKey}>
         <DonationsTabContainer role="region">
           <DonationsTabList
@@ -144,9 +133,16 @@ export const ContactDonationsTab: React.FC<ContactDonationsProp> = ({
         <StyledTabPanel value={DonationTabKey.PartnershipInfo}>
           {loading ? (
             <>
-              <ContactDonationsLoadingPlaceHolder />
-              <ContactDonationsLoadingPlaceHolder />
-              <ContactDonationsLoadingPlaceHolder />
+              <PartnershipInfoLoadingPlaceHolder />
+              <PartnershipInfoLoadingPlaceHolder />
+              <PartnershipInfoLoadingPlaceHolder />
+              <PartnershipInfoLoadingPlaceHolder />
+              <PartnershipInfoLoadingPlaceHolder />
+              <PartnershipInfoLoadingPlaceHolder />
+              <PartnershipInfoLoadingPlaceHolder />
+              <PartnershipInfoLoadingPlaceHolder />
+              <PartnershipInfoLoadingPlaceHolder />
+              <PartnershipInfoLoadingPlaceHolder />
             </>
           ) : (
             <PartnershipInfo contact={data?.contact ?? null} />

diff --git a/...onents/Contacts/ContactDetails/ContactDonationsTab/DonationsGraph/DonationsGraph.test.tsx b/...onents/Contacts/ContactDetails/ContactDonationsTab/DonationsGraph/DonationsGraph.test.tsx
@@ -83,6 +83,19 @@ describe('Donations Graph', () => {
     expect(getByLabelText('Loading donations graph')).toBeInTheDocument();
   });
 
+  it('renders loading placeholders while waiting for donorAccountIds', async () => {
+    const { getByLabelText } = render(
+      <GqlMockedProvider>
+        <DonationsGraph
+          accountListId="accountListID"
+          donorAccountIds={undefined}
+          convertedCurrency="USD"
+        />
+      </GqlMockedProvider>,
+    );
+    expect(getByLabelText('Loading donations graph')).toBeInTheDocument();
+  });
+
   it('test query', async () => {
     const { result, waitForNextUpdate } = renderHook(
       () =>

diff --git a/src/components/Contacts/ContactDetails/ContactDonationsTab/DonationsGraph/DonationsGraph.tsx b/src/components/Contacts/ContactDetails/ContactDonationsTab/DonationsGraph/DonationsGraph.tsx
@@ -30,8 +30,8 @@ const GraphContainer = styled(Box)(({ theme }) => ({
 
 interface DonationsGraphProps {
   accountListId: string;
-  donorAccountIds: string[];
-  convertedCurrency: string;
+  donorAccountIds: string[] | undefined;
+  convertedCurrency: string | undefined;
 }
 
 export const DonationsGraph: React.FC<DonationsGraphProps> = ({
@@ -41,11 +41,13 @@ export const DonationsGraph: React.FC<DonationsGraphProps> = ({
 }) => {
   const { t } = useTranslation();
   const locale = useLocale();
+  const skipped = !donorAccountIds;
   const { data, loading } = useGetDonationsGraphQuery({
     variables: {
       accountListId: accountListId,
       donorAccountIds: donorAccountIds,
     },
+    skip: skipped,
   });
 
   const monthFormatter = useMemo(
@@ -101,7 +103,7 @@ export const DonationsGraph: React.FC<DonationsGraphProps> = ({
         </Typography>
       )}
       <GraphContainer>
-        {loading ? (
+        {loading || skipped ? (
           <Skeleton
             variant="rounded"
             width="100%"