diff --git a/src/components/Contacts/ContactRow/ContactRow.tsx b/src/components/Contacts/ContactRow/ContactRow.tsx index 436e0f9de..c5b92c865 100644 --- 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 = ({ contact, useTopMargin }) => { } = contact; return ( - + - 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 index 8eb197604..b741665c3 100644 --- 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 = ({ row.contactId && onSelectContact(row.contactId)} + onMouseEnter={preloadContactsRightPanel} > {row.donorAccountName} diff --git a/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx b/src/components/Reports/FourteenMonthReports/Layout/Table/Table.tsx index e00cdc3e2..b0a55e03d 100644 --- 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< 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 index cbb8323f6..7b163c866 100644 --- 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< /> - onClick(contact.id)}> + onClick(contact.id)} + onMouseEnter={preloadContactsRightPanel} + > {contact.name}