From 24502dddfca61a334b3ff4dc11bd9fffece91b7f Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Sat, 27 Dec 2025 17:25:04 +0000
Subject: [PATCH] Fixed charts lazy loading.

---
 .../Dashboard/common/HistoryDisplay.jsx       | 35 +++++++++++++++--
 vite.config.js                                | 39 +++++++------------
 2 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/src/components/Dashboard/common/HistoryDisplay.jsx b/src/components/Dashboard/common/HistoryDisplay.jsx
index f458911..f0dda26 100644
--- a/src/components/Dashboard/common/HistoryDisplay.jsx
+++ b/src/components/Dashboard/common/HistoryDisplay.jsx
@@ -1,6 +1,19 @@
-import { useEffect, useState, useContext, useMemo } from 'react'
-import { Card, Segmented, Flex, Popover, DatePicker, Button, Space } from 'antd'
-import { Column } from '@ant-design/charts'
+import { useEffect, useState, useContext, useMemo, lazy, Suspense } from 'react'
+import {
+  Card,
+  Segmented,
+  Flex,
+  Popover,
+  DatePicker,
+  Button,
+  Space,
+  Skeleton
+} from 'antd'
+
+const Column = lazy(() =>
+  import('@ant-design/charts').then((module) => ({ default: module.Column }))
+)
+
 import PropTypes from 'prop-types'
 import { getModelByName } from '../../../database/ObjectModels'
 import { ApiServerContext } from '../context/ApiServerContext'
@@ -378,7 +391,21 @@ const HistoryDisplay = ({
           <LoadingPlaceholder message='Loading history data...' />
         </Flex>
       )}
-      {chartData.length > 0 && <Column {...config} />}
+      {chartData.length > 0 && (
+        <Suspense
+          fallback={
+            <Flex
+              justify='center'
+              align='center'
+              style={{ height: `${height}px` }}
+            >
+              <Skeleton active paragraph={{ rows: 4 }} />
+            </Flex>
+          }
+        >
+          <Column {...config} />
+        </Suspense>
+      )}
       {loading == false && chartData.length == 0 && (
         <Flex justify='center' align='center' style={{ height: `${height}px` }}>
           <MissingPlaceholder message='No data available.' />
diff --git a/vite.config.js b/vite.config.js
index e6acdbc..4471ae8 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -5,6 +5,7 @@ import svgr from 'vite-plugin-svgr'
 import svgo from 'vite-plugin-svgo'
 import path from 'path'
 import { fileURLToPath } from 'url'
+import { visualizer } from 'rollup-plugin-visualizer'
 
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
@@ -19,10 +20,10 @@ export default defineConfig({
   optimizeDeps: {
     include: ['@ant-design/icons']
   },
-  plugins: [react(), svgo(), svgr(), eslintPlugin()],
+  plugins: [react(), svgo(), svgr(), eslintPlugin(), visualizer()],
   build: {
     outDir: 'build',
-    chunkSizeWarningLimit: 1500,
+    chunkSizeWarningLimit: 2000,
     rollupOptions: {
       output: {
         manualChunks(id) {
@@ -36,30 +37,34 @@ export default defineConfig({
             return 'lezer'
           }
 
-          // --- Ant Design & related
+          // --- Core Vendor (Ant Design, React, etc.)
           if (
             id.includes('node_modules/antd') ||
             id.includes('node_modules/@ant-design') ||
             id.includes('node_modules/rc-') ||
             id.includes('node_modules/antd-style') ||
             id.includes('node_modules/@rc-component') ||
-            id.includes('node_modules/dayjs')
+            id.includes('node_modules/dayjs') ||
+            id.includes('node_modules/react') ||
+            id.includes('node_modules/react-dom') ||
+            id.includes('node_modules/react-router-dom')
           ) {
-            // Keep charts and their AntV dependencies together in a separate chunk
+            // EXCLUDE charts so they are handled by lazy loading in HistoryDisplay.jsx
             if (
               id.includes('node_modules/@ant-design/charts') ||
               id.includes('node_modules/@ant-design/plots') ||
               id.includes('node_modules/@ant-design/graphs') ||
-              id.includes('node_modules/@ant-design/charts-util')
+              id.includes('node_modules/@ant-design/charts-util') ||
+              id.includes('node_modules/@antv')
             ) {
-              return 'ant-charts'
+              return
             }
             return 'antd'
           }
 
-          // --- AntV (used by charts)
-          if (id.includes('node_modules/@antv')) {
-            return 'ant-charts'
+          // --- Lodash
+          if (id.includes('node_modules/lodash')) {
+            return 'lodash'
           }
 
           // --- Three.js
@@ -77,11 +82,6 @@ export default defineConfig({
             return 'online-3d-viewer'
           }
 
-          // --- Lodash
-          if (id.includes('node_modules/lodash')) {
-            return 'lodash'
-          }
-
           // --- tsparticles
           if (
             id.includes('node_modules/@tsparticles') ||
@@ -89,15 +89,6 @@ export default defineConfig({
           ) {
             return 'tsparticles'
           }
-
-          // --- React vendor
-          if (
-            id.includes('node_modules/react') ||
-            id.includes('node_modules/react-dom') ||
-            id.includes('node_modules/react-router-dom')
-          ) {
-            return 'react-vendor'
-          }
         }
       }
     }