Lazy load the edit donation modal

CruGlobal · Mar 25, 2024 · 69441a2 · 69441a2
1 parent fc3d597
commit 69441a2
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/...Contacts/ContactDetails/ContactDonationsTab/ContactDonationsList/ContactDonationsList.tsx b/...Contacts/ContactDetails/ContactDonationsTab/ContactDonationsList/ContactDonationsList.tsx
@@ -13,7 +13,7 @@ import {
 import { styled } from '@mui/material/styles';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
-import { EditDonationModal } from 'src/components/EditDonationModal/EditDonationModal';
+import { DynamicEditDonationModal } from 'src/components/EditDonationModal/DynamicEditDonationModal';
 import { EditDonationModalDonationFragment } from 'src/components/EditDonationModal/EditDonationModal.generated';
 import { useGetAccountListCurrencyQuery } from 'src/components/Reports/DonationsReport/GetDonationsTable.generated';
 import { useLocale } from 'src/hooks/useLocale';
@@ -146,7 +146,7 @@ export const ContactDonationsList: React.FC<ContactDonationsListProp> = ({
         </>
       )}
       {editingDonation && (
-        <EditDonationModal
+        <DynamicEditDonationModal
           open
           donation={editingDonation}
           handleClose={() => setEditingDonation(null)}

diff --git a/src/components/EditDonationModal/DynamicEditDonationModal.tsx b/src/components/EditDonationModal/DynamicEditDonationModal.tsx
@@ -0,0 +1,12 @@
+import dynamic from 'next/dynamic';
+import { DynamicComponentPlaceholder } from 'src/components/DynamicComponentPlaceholder/DynamicComponentPlaceholder';
+
+export const DynamicEditDonationModal = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "EditDonationModal" */ './EditDonationModal'
+    ).then(({ EditDonationModal }) => EditDonationModal),
+  {
+    loading: () => <DynamicComponentPlaceholder />,
+  },
+);
diff --git a/src/components/Reports/DonationsReport/Table/DonationsReportTable.tsx b/src/components/Reports/DonationsReport/Table/DonationsReportTable.tsx
@@ -21,7 +21,7 @@ import { styled } from '@mui/material/styles';
 import { DataGrid, GridColDef, GridSortModel } from '@mui/x-data-grid';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
-import { EditDonationModal } from 'src/components/EditDonationModal/EditDonationModal';
+import { DynamicEditDonationModal } from 'src/components/EditDonationModal/DynamicEditDonationModal';
 import { useFetchAllPages } from 'src/hooks/useFetchAllPages';
 import { useLocale } from 'src/hooks/useLocale';
 import { currencyFormat, dateFormatShort } from 'src/lib/intlFormat';
@@ -462,7 +462,7 @@ export const DonationsReportTable: React.FC<DonationReportTableProps> = ({
         />
       )}
       {selectedDonation && (
-        <EditDonationModal
+        <DynamicEditDonationModal
           open
           donation={selectedDonation.rawDonation}
           handleClose={() => handleClose()}