Lazy load map panel

CruGlobal · Apr 2, 2024 · ff66c4b · ff66c4b
1 parent 54caa72
commit ff66c4b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/Contacts/ContactsLeftPanel/ContactsLeftPanel.tsx b/src/components/Contacts/ContactsLeftPanel/ContactsLeftPanel.tsx
@@ -5,7 +5,7 @@ import {
   ContactsContext,
   ContactsType,
 } from '../ContactsContext/ContactsContext';
-import { ContactsMapPanel } from '../ContactsMap/ContactsMapPanel';
+import { DynamicContactsMapPanel } from '../ContactsMap/DynamicContactsMapPanel';
 
 export const ContactsLeftPanel: React.FC = () => {
   const {
@@ -23,7 +23,7 @@ export const ContactsLeftPanel: React.FC = () => {
   } = React.useContext(ContactsContext) as ContactsType;
 
   return viewMode === TableViewModeEnum.Map ? (
-    <ContactsMapPanel
+    <DynamicContactsMapPanel
       data={mapData}
       panTo={panTo}
       selected={selected}

diff --git a/src/components/Contacts/ContactsMap/DynamicContactsMapPanel.tsx b/src/components/Contacts/ContactsMap/DynamicContactsMapPanel.tsx
@@ -0,0 +1,10 @@
+import dynamic from 'next/dynamic';
+import { DynamicComponentPlaceholder } from 'src/components/DynamicPlaceholders/DynamicComponentPlaceholder';
+
+export const DynamicContactsMapPanel = dynamic(
+  () =>
+    import(
+      /* webpackChunkName: "ContactsMapPanel" */ './ContactsMapPanel'
+    ).then(({ ContactsMapPanel }) => ContactsMapPanel),
+  { loading: DynamicComponentPlaceholder },
+);