farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed charts lazy loading.

Browse Source
This commit is contained in:
Tom Butcher 2025-12-27 17:25:04 +00:00
parent b3961871ff
commit 24502dddfc
2 changed files with 46 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/Dashboard/common/HistoryDisplay.jsx
View File

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

39
vite.config.js
View File

@ -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'
}
}
}
}