public/preload.css

@@ -26,7 +26,6 @@
   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,19 +1,6 @@
-import { useEffect, useState, useContext, useMemo, lazy, Suspense } from 'react'
+import { useEffect, useState, useContext, useMemo } from 'react'
-import {
+import { Card, Segmented, Flex, Popover, DatePicker, Button, Space } from 'antd'
-  Card,
+import { Column } from '@ant-design/charts'
-  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'
@@ -391,21 +378,7 @@ const HistoryDisplay = ({
           <LoadingPlaceholder message='Loading history data...' />
         </Flex>
       )}
-      {chartData.length > 0 && (
+      {chartData.length > 0 && <Column {...config} />}
-        <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,7 +5,6 @@ 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)
@@ -20,10 +19,10 @@ export default defineConfig({
   optimizeDeps: {
     include: ['@ant-design/icons']
   },
-  plugins: [react(), svgo(), svgr(), eslintPlugin(), visualizer()],
+  plugins: [react(), svgo(), svgr(), eslintPlugin()],
   build: {
     outDir: 'build',
-    chunkSizeWarningLimit: 2000,
+    chunkSizeWarningLimit: 1500,
     rollupOptions: {
       output: {
         manualChunks(id) {
@@ -37,34 +36,18 @@ export default defineConfig({
             return 'lezer'
           }
 
-          // --- Core Vendor (Ant Design, React, etc.)
+          // --- Ant Design
-          if (
+          if (id.includes('node_modules/antd')) {
-            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'
           }
 
-          // --- Lodash
+          if (id.includes('node_modules/@ant-design/charts')) {
-          if (id.includes('node_modules/lodash')) {
+            return 'ant-charts'
-            return 'lodash'
+          }
+
+          // --- AntV
+          if (id.includes('node_modules/@antv')) {
+            return 'antv'
           }
 
           // --- Three.js
@@ -82,6 +65,11 @@ export default defineConfig({
             return 'online-3d-viewer'
           }
 
+          // --- Lodash
+          if (id.includes('node_modules/lodash')) {
+            return 'lodash'
+          }
+
           // --- tsparticles
           if (
             id.includes('node_modules/@tsparticles') ||
@@ -89,6 +77,15 @@ 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'
+          }
         }
       }
     }