Preload contacts right panel links

CruGlobal · Apr 29, 2024 · da17fb4 · da17fb4
1 parent 9f40496
commit da17fb4
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 9 deletions.
diff --git a/src/components/Contacts/ContactRow/ContactRow.tsx b/src/components/Contacts/ContactRow/ContactRow.tsx
@@ -18,6 +18,7 @@ import {
 import { CelebrationIcons } from '../CelebrationIcons/CelebrationIcons';
 import { ContactPartnershipStatus } from '../ContactPartnershipStatus/ContactPartnershipStatus';
 import { ContactUncompletedTasksCount } from '../ContactUncompletedTasksCount/ContactUncompletedTasksCount';
+import { preloadContactsRightPanel } from '../ContactsRightPanel/DynamicContactsRightPanel';
 import { StarContactIconButton } from '../StarContactIconButton/StarContactIconButton';
 import { ContactRowFragment } from './ContactRow.generated';
 
@@ -75,7 +76,12 @@ export const ContactRow: React.FC<Props> = ({ contact, useTopMargin }) => {
   } = contact;
 
   return (
-    <ListItemButton focusRipple onClick={onClick} data-testid="rowButton">
+    <ListItemButton
+      focusRipple
+      onClick={onClick}
+      onMouseEnter={preloadContactsRightPanel}
+      data-testid="rowButton"
+    >
       <Hidden xsDown>
         <ListItemIcon>
           <StyledCheckbox

diff --git a/src/components/Contacts/ContactsRightPanel/DynamicContactsRightPanel.tsx b/src/components/Contacts/ContactsRightPanel/DynamicContactsRightPanel.tsx
@@ -1,10 +1,11 @@
 import dynamic from 'next/dynamic';
 import { DynamicComponentPlaceholder } from 'src/components/DynamicPlaceholders/DynamicComponentPlaceholder';
 
-export const DynamicContactsRightPanel = dynamic(
-  () =>
-    import(
-      /* webpackChunkName: "ContactsRightPanel" */ './ContactsRightPanel'
-    ).then(({ ContactsRightPanel }) => ContactsRightPanel),
-  { loading: DynamicComponentPlaceholder },
-);
+export const preloadContactsRightPanel = () =>
+  import(
+    /* webpackChunkName: "ContactsRightPanel" */ './ContactsRightPanel'
+  ).then(({ ContactsRightPanel }) => ContactsRightPanel);
+
+export const DynamicContactsRightPanel = dynamic(preloadContactsRightPanel, {
+  loading: DynamicComponentPlaceholder,
+});
diff --git a/src/components/Reports/DonationsReport/Table/DonationsReportTable.tsx b/src/components/Reports/DonationsReport/Table/DonationsReportTable.tsx
@@ -21,6 +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 { preloadContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/DynamicContactsRightPanel';
 import {
   DynamicEditDonationModal,
   preloadEditDonationModal,
@@ -190,6 +191,7 @@ export const DonationsReportTable: React.FC<DonationReportTableProps> = ({
       <Link
         underline="hover"
         onClick={() => row.contactId && onSelectContact(row.contactId)}
+        onMouseEnter={preloadContactsRightPanel}
       >
         {row.donorAccountName}
       </Link>

diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx
@@ -11,6 +11,7 @@ import {
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import { useTranslation } from 'react-i18next';
+import { preloadContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/DynamicContactsRightPanel';
 import { useLocale } from 'src/hooks/useLocale';
 import theme from 'src/theme';
 import { numberFormat } from '../../../../../lib/intlFormat';
@@ -120,6 +121,7 @@ export const FourteenMonthReportTable: React.FC<
                       <NameTypography variant="body1" expanded={isExpanded}>
                         <Link
                           onClick={() => onSelectContact(contact.id)}
+                          onMouseEnter={preloadContactsRightPanel}
                           underline="hover"
                         >
                           {contact.name}

diff --git a/src/components/Reports/PartnerGivingAnalysisReport/Table/Table.tsx b/src/components/Reports/PartnerGivingAnalysisReport/Table/Table.tsx
@@ -11,6 +11,7 @@ import {
 import { styled } from '@mui/material/styles';
 import { DateTime } from 'luxon';
 import { useTranslation } from 'react-i18next';
+import { preloadContactsRightPanel } from 'src/components/Contacts/ContactsRightPanel/DynamicContactsRightPanel';
 import { useLocale } from 'src/hooks/useLocale';
 import { currencyFormat, dateFormatShort } from 'src/lib/intlFormat';
 import { PartnerGivingAnalysisReportTableHead as TableHead } from './TableHead/TableHead';
@@ -125,7 +126,10 @@ export const PartnerGivingAnalysisReportTable: FC<
                   />
                 </TableCell>
                 <TableCell>
-                  <ContactName onClick={() => onClick(contact.id)}>
+                  <ContactName
+                    onClick={() => onClick(contact.id)}
+                    onMouseEnter={preloadContactsRightPanel}
+                  >
                     {contact.name}
                   </ContactName>
                 </TableCell>