From 0224fbd61b99903c55c8a8cee3c21c9adfda3336 Mon Sep 17 00:00:00 2001
From: Sebastien Arod <sebastien.arod+framagit@gmail.com>
Date: Tue, 11 Jun 2024 08:56:54 +0200
Subject: [PATCH] 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                         |  2 +-
 package.json                           |  1 +
 src/routes/Liste/Map/ResistantsMap.tsx |  6 +++---
 src/routes/Liste/index.tsx             | 30 ++++++++++++++++++--------
 vite.config.ts                         | 10 +++------
 5 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index be54dcf..4387227 100644
--- a/.gitlab-ci.yml
+++ b/.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
diff --git a/package.json b/package.json
index d855621..bb45cfd 100644
--- a/package.json
+++ b/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": {
diff --git a/src/routes/Liste/Map/ResistantsMap.tsx b/src/routes/Liste/Map/ResistantsMap.tsx
index 83106f2..2199c97 100644
--- a/src/routes/Liste/Map/ResistantsMap.tsx
+++ b/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
   );
diff --git a/src/routes/Liste/index.tsx b/src/routes/Liste/index.tsx
index 6e665ea..f1ff9d2 100644
--- a/src/routes/Liste/index.tsx
+++ b/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>
     </>
diff --git a/vite.config.ts b/vite.config.ts
index 75a5c27..c971ede 100644
--- a/vite.config.ts
+++ b/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]";
         },
       },
     },