chore: fix package.json, chunk for chart

Author: asuzuki-jumptrading

package-lock.json

@@ -50,6 +50,7 @@
     "react-use": "^17.5.1",
     "react-virtualized-auto-sizer": "^1.0.24",
     "react-virtuoso": "^4.13.0",
+    "three": "0.184.0",
     "uplot": "^1.6.32",
     "use-debounce": "^10.0.3",
     "zod": "^4.1.13"
@@ -68,6 +69,7 @@
     "@types/node": "^22.7.0",
     "@types/react": "^18.3.26",
     "@types/react-dom": "^18.3.7",
+    "@types/three": "^0.184.0",
     "@vitejs/plugin-react": "^4.3.1",
     "baseline-browser-mapping": "^2.10.29",
     "eslint": "^9.11.1",

package.json

@@ -1,10 +1,14 @@
-import { Flex } from "@radix-ui/themes";
+import { lazy, Suspense } from "react";
+import { Box, Flex } from "@radix-ui/themes";
 import Card from "../../../components/Card";
 import CardHeader from "../../../components/CardHeader";
-import ShredsChartWebGl from "./WebGl/Chart";
 import { ShredsChartLegend } from "./ShredsChartLegend";
 import { isFrankendancer } from "../../../client";
 
+// Lazy-load so Three.js is split into its own chunk, downloaded only when the
+// shreds chart mounts.
+const ShredsChartWebGl = lazy(() => import("./WebGl/Chart"));
+
 export default function ShredsProgression() {
   if (isFrankendancer) return;
 
@@ -16,7 +20,9 @@ export default function ShredsProgression() {
           <CardHeader text="Shreds" />
           <ShredsChartLegend />
         </Flex>
-        <ShredsChartWebGl height="400px" chartId="overview-shreds-chart" />
+        <Suspense fallback={<Box height="400px" />}>
+          <ShredsChartWebGl height="400px" chartId="overview-shreds-chart" />
+        </Suspense>
       </Flex>
     </Card>
   );