feat: Lazy load ResistantMap to allow code splitting

src/routes/Liste/Map/ResistantsMap.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import Map, { Marker, NavigationControl, Popup } from "react-map-gl";
 import maplibregl from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
+import React from "react";
+import Map, { Marker, NavigationControl, Popup } from "react-map-gl";
 import { Resistant } from "../../../Resistant";
 import { Picto } from "./Picto";
 import { PopupContent } from "./PopupContent";
@@ -12,7 +12,7 @@ interface Props {
 
 const accessToken = "LiH20XNxcFiTXyT4fgjM";
 
-export const ResistantsMap = ({ resistants }: Props) => {
+export default ({ resistants }: Props) => {
   const [selectedResistant, selectResistant] = React.useState<Resistant | null>(
     null
   );

src/routes/Liste/index.tsx

@@ -1,23 +1,28 @@
-import React from "react";
-import { Outlet } from "react-router";
-import { Center, Group, SegmentedControl, TextInput } from "@mantine/core";
+import {
+  Center,
+  Group,
+  Loader,
+  SegmentedControl,
+  TextInput,
+} from "@mantine/core";
 import {
   IconCameraSelfie,
   IconList,
   IconMap,
   IconUsers,
 } from "@tabler/icons-react";
+import React, { Suspense, lazy } from "react";
+import { Outlet } from "react-router";
+import { resistantsOrder } from "../../Resistant";
 import { Separator } from "../../components/Separator";
 import { DisplayModeContext } from "../../context/DisplayModeContext";
+import { HomeContext } from "../../context/HomeContext";
 import { resistants } from "../../resistants";
 import { ViewMode } from "../ViewMode";
 import { FiltreAcademie } from "./FiltreAcademie";
-import { ResistantsMap } from "./Map/ResistantsMap";
-import { ResistantsThumbs } from "./Thumbs/ResistantsThumbs";
 import { FiltreDepartement } from "./FiltreDepartement";
 import { ResistantRow } from "./List/ResistantRow";
-import { HomeContext } from "../../context/HomeContext";
-import { resistantsOrder } from "../../Resistant";
+import { ResistantsThumbs } from "./Thumbs/ResistantsThumbs";
 
 const normalize = (text: string) =>
   (text || "")
@@ -25,6 +30,8 @@ const normalize = (text: string) =>
     .normalize("NFD")
     .replace(/\p{Diacritic}/gu, "");
 
+const LazyResistantsMap = lazy(() => import("./Map/ResistantsMap"));
+
 export const ListeResistants = () => {
   const { mode, setMode } = React.useContext(DisplayModeContext);
   const { isHome } = React.useContext(HomeContext);
@@ -118,8 +125,13 @@ export const ListeResistants = () => {
           <ResistantsThumbs resistants={filteredResistants} />
         )}
 
-        {mode === "map" && <ResistantsMap resistants={filteredResistants} />}
-
+        {mode === "map" && (
+          <Suspense
+            fallback={<Loader style={{ display: "block", margin: "auto" }} />}
+          >
+            <LazyResistantsMap resistants={filteredResistants} />
+          </Suspense>
+        )}
         <Outlet />
       </div>
     </>