Fixed charts lazy loading.

public/preload.css

@@ -26,6 +26,7 @@
   background:
     radial-gradient(farthest-side, #008eff 94%, #0000) top/6px 6px no-repeat,
     conic-gradient(#0000 30%, #008eff);
+  mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
   -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
   animation: l13 1s infinite linear;
 }

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

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,18 +37,34 @@ export default defineConfig({
             return 'lezer'
           }
 
-          // --- Ant Design
-          if (id.includes('node_modules/antd')) {
+          // --- 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/react') ||
+            id.includes('node_modules/react-dom') ||
+            id.includes('node_modules/react-router-dom')
+          ) {
+            // 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/@antv')
+            ) {
+              return
+            }
             return 'antd'
           }
 
-          if (id.includes('node_modules/@ant-design/charts')) {
-            return 'ant-charts'
-          }
-
-          // --- AntV
-          if (id.includes('node_modules/@antv')) {
-            return 'antv'
+          // --- Lodash
+          if (id.includes('node_modules/lodash')) {
+            return 'lodash'
           }
 
           // --- Three.js
@@ -65,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') ||
@@ -77,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'
-          }
         }
       }
     }