feat: Lazy load Map to allow code split (2)

* Lazy load Map
* Modify vite config base in ci to use absolute url

.gitlab-ci.yml

@@ -5,7 +5,7 @@ before_script:
   - yarn install --immutable
 pages:
   script:
-    - yarn build
+    - yarn build-ci
   artifacts:
     paths:
       # The folder that contains the files to be exposed at the Page URL

package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
+    "build-ci": "tsc && vite build --base=https://enfance-libre.frama.io/resistants",
     "prettier": "prettier -w ."
   },
   "dependencies": {

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>
     </>

vite.config.ts

@@ -5,8 +5,7 @@ import { imagetools } from "vite-imagetools";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), imagetools()],
-  // Resistants module is deployed in framagit under /resistants
-  base: "/resistants",
+  base: "resistants",
   build: {
     rollupOptions: {
       output: {
@@ -14,14 +13,11 @@ export default defineConfig({
         entryFileNames: "resistants.js",
         assetFileNames: (meta) => {
           const name = meta.name;
-          if (name === "squarespace-site.css") {
-            // this won't be injected in squarespace
-            return "squarespace-site.css";
-          } else if (name.indexOf(".css") > 0) {
+          if (name !== "squarespace-site.css" && name.indexOf(".css") > 0) {
             // this name is used in the code to inject module in squarespace
             return "resistants.css";
           }
-          return "assets/[name].[ext]";
+          return "assets/[name]-[hash].[ext]";
         },
       },
     },