lazy load charts and disable chart animations

2025-12-17 18:56:17 +01:00 · 2024-08-04 20:14:13 -04:00
parent e3ed07a999
commit 8ef30e0733
12 changed files with 189 additions and 105 deletions
--- a/hub/site/src/components/charts/bandwidth-chart.tsx
+++ b/hub/site/src/components/charts/bandwidth-chart.tsx
@@ -1,12 +1,12 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'

 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
-import Spinner from '../spinner'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'

 export default function BandwidthChart({
 	ticks,
@@ -19,13 +19,17 @@ export default function BandwidthChart({
 	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)

-	if (!systemData.length || !ticks.length) {
-		return <Spinner />
-	}
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])

 	return (
 		<div ref={chartRef}>
-			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
 				<AreaChart
 					accessibilityLayer
 					data={systemData}
@@ -80,7 +84,8 @@ export default function BandwidthChart({
 						fill="hsl(var(--chart-5))"
 						fillOpacity={0.4}
 						stroke="hsl(var(--chart-5))"
-						animationDuration={1200}
+						// animationDuration={1200}
+						isAnimationActive={false}
 					/>
 					<Area
 						dataKey="stats.nr"
@@ -89,7 +94,8 @@ export default function BandwidthChart({
 						fill="hsl(var(--chart-2))"
 						fillOpacity={0.4}
 						stroke="hsl(var(--chart-2))"
-						animationDuration={1200}
+						// animationDuration={1200}
+						isAnimationActive={false}
 					/>
 				</AreaChart>
 			</ChartContainer>
--- a/hub/site/src/components/charts/container-cpu-chart.tsx
+++ b/hub/site/src/components/charts/container-cpu-chart.tsx
@@ -6,8 +6,8 @@ import {
 	ChartTooltipContent,
 } from '@/components/ui/chart'
 import { useMemo, useRef } from 'react'
-import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
-import Spinner from '../spinner'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'

@@ -22,6 +22,8 @@ export default function ContainerCpuChart({
 	const yAxisWidth = useYaxisWidth(chartRef)
 	const chartTime = useStore($chartTime)

+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
 			string,
@@ -57,13 +59,19 @@ export default function ContainerCpuChart({
 		return config satisfies ChartConfig
 	}, [chartData])

-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
+	// if (!chartData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }

 	return (
 		<div ref={chartRef}>
-			<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
 				<AreaChart
 					accessibilityLayer
 					data={chartData}
@@ -105,8 +113,9 @@ export default function ContainerCpuChart({
 						<Area
 							key={key}
 							// isAnimationActive={chartData.length < 20}
-							animateNewValues={false}
-							animationDuration={1200}
+							isAnimationActive={false}
+							// animateNewValues={false}
+							// animationDuration={1200}
 							dataKey={key}
 							type="monotoneX"
 							fill={chartConfig[key].color}
--- a/hub/site/src/components/charts/container-mem-chart.tsx
+++ b/hub/site/src/components/charts/container-mem-chart.tsx
@@ -6,8 +6,8 @@ import {
 	ChartTooltipContent,
 } from '@/components/ui/chart'
 import { useMemo, useRef } from 'react'
-import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
-import Spinner from '../spinner'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'

@@ -18,9 +18,11 @@ export default function ContainerMemChart({
 	chartData: Record<string, number | string>[]
 	ticks: number[]
 }) {
+	const chartTime = useStore($chartTime)
 	const chartRef = useRef<HTMLDivElement>(null)
 	const yAxisWidth = useYaxisWidth(chartRef)
-	const chartTime = useStore($chartTime)
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])

 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
@@ -57,13 +59,19 @@ export default function ContainerMemChart({
 		return config satisfies ChartConfig
 	}, [chartData])

-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
+	// if (!chartData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }

 	return (
 		<div ref={chartRef}>
-			<ChartContainer config={chartConfig} className="h-full w-full absolute aspect-auto">
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
 				<AreaChart
 					accessibilityLayer
 					data={chartData}
@@ -71,8 +79,6 @@ export default function ContainerMemChart({
 					margin={{
 						top: 10,
 					}}
-
-					// reverseStackOrder={true}
 				>
 					<CartesianGrid vertical={false} />
 					<YAxis
@@ -109,9 +115,8 @@ export default function ContainerMemChart({
 					{Object.keys(chartConfig).map((key) => (
 						<Area
 							key={key}
-							isAnimationActive={chartData.length < 20}
-							animateNewValues={false}
-							animationDuration={1200}
+							// animationDuration={1200}
+							isAnimationActive={false}
 							dataKey={key}
 							type="monotoneX"
 							fill={chartConfig[key].color}
--- a/hub/site/src/components/charts/container-net-chart.tsx
+++ b/hub/site/src/components/charts/container-net-chart.tsx
@@ -6,8 +6,8 @@ import {
 	ChartTooltipContent,
 } from '@/components/ui/chart'
 import { useMemo, useRef } from 'react'
-import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
-import Spinner from '../spinner'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { Separator } from '@/components/ui/separator'
@@ -19,9 +19,11 @@ export default function ContainerCpuChart({
 	chartData: Record<string, number | number[]>[]
 	ticks: number[]
 }) {
+	const chartTime = useStore($chartTime)
 	const chartRef = useRef<HTMLDivElement>(null)
 	const yAxisWidth = useYaxisWidth(chartRef)
-	const chartTime = useStore($chartTime)
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])

 	const chartConfig = useMemo(() => {
 		let config = {} as Record<
@@ -57,13 +59,19 @@ export default function ContainerCpuChart({
 		return config satisfies ChartConfig
 	}, [chartData])

-	if (!chartData.length || !ticks.length) {
-		return <Spinner />
-	}
+	// if (!chartData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }

 	return (
 		<div ref={chartRef}>
-			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
 				<AreaChart
 					accessibilityLayer
 					data={chartData}
@@ -134,9 +142,8 @@ export default function ContainerCpuChart({
 						<Area
 							key={key}
 							name={key}
-							// isAnimationActive={chartData.length < 20}
-							animateNewValues={false}
-							animationDuration={1200}
+							// animationDuration={1200}
+							isAnimationActive={false}
 							dataKey={(data) => data?.[key]?.[2] ?? 0}
 							type="monotoneX"
 							fill={chartConfig[key].color}
--- a/hub/site/src/components/charts/cpu-chart.tsx
+++ b/hub/site/src/components/charts/cpu-chart.tsx
@@ -1,12 +1,12 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'

 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
-import Spinner from '../spinner'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'

 export default function CpuChart({
 	ticks,
@@ -15,17 +15,24 @@ export default function CpuChart({
 	ticks: number[]
 	systemData: SystemStatsRecord[]
 }) {
+	const chartTime = useStore($chartTime)
 	const chartRef = useRef<HTMLDivElement>(null)
 	const yAxisWidth = useYaxisWidth(chartRef)
-	const chartTime = useStore($chartTime)

-	if (!systemData.length || !ticks.length) {
-		return <Spinner />
-	}
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
+	// if (!systemData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }

 	return (
 		<div ref={chartRef}>
-			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
 				<AreaChart accessibilityLayer data={systemData} margin={{ top: 10 }}>
 					<CartesianGrid vertical={false} />
 					<YAxis
@@ -64,9 +71,10 @@ export default function CpuChart({
 						fill="hsl(var(--chart-1))"
 						fillOpacity={0.4}
 						stroke="hsl(var(--chart-1))"
-						animationDuration={1200}
+						isAnimationActive={false}
 						// animationEasing="ease-out"
-						// animateNewValues={false}
+						animationDuration={700}
+						animateNewValues={true}
 					/>
 				</AreaChart>
 			</ChartContainer>
--- a/hub/site/src/components/charts/disk-chart.tsx
+++ b/hub/site/src/components/charts/disk-chart.tsx
@@ -1,9 +1,9 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'

 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
 import { useMemo, useRef } from 'react'
-import Spinner from '../spinner'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
@@ -15,9 +15,11 @@ export default function DiskChart({
 	ticks: number[]
 	systemData: SystemStatsRecord[]
 }) {
+	const chartTime = useStore($chartTime)
 	const chartRef = useRef<HTMLDivElement>(null)
 	const yAxisWidth = useYaxisWidth(chartRef)
-	const chartTime = useStore($chartTime)
+
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])

 	const diskSize = useMemo(() => {
 		return Math.round(systemData[0]?.stats.d)
@@ -32,13 +34,19 @@ export default function DiskChart({
 	// 	return ticks
 	// }, [diskSize])

-	if (!systemData.length || !ticks.length) {
-		return <Spinner />
-	}
+	// if (!systemData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }

 	return (
 		<div ref={chartRef}>
-			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
 				<AreaChart
 					accessibilityLayer
 					data={systemData}
@@ -88,7 +96,8 @@ export default function DiskChart({
 						fill="hsl(var(--chart-4))"
 						fillOpacity={0.4}
 						stroke="hsl(var(--chart-4))"
-						animationDuration={1200}
+						// animationDuration={1200}
+						isAnimationActive={false}
 					/>
 				</AreaChart>
 			</ChartContainer>
--- a/hub/site/src/components/charts/disk-io-chart.tsx
+++ b/hub/site/src/components/charts/disk-io-chart.tsx
@@ -1,12 +1,12 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'

 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
-import Spinner from '../spinner'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'

 export default function DiskIoChart({
 	ticks,
@@ -15,17 +15,25 @@ export default function DiskIoChart({
 	ticks: number[]
 	systemData: SystemStatsRecord[]
 }) {
+	const chartTime = useStore($chartTime)
 	const chartRef = useRef<HTMLDivElement>(null)
 	const yAxisWidth = useYaxisWidth(chartRef)
-	const chartTime = useStore($chartTime)

-	if (!systemData.length || !ticks.length) {
-		return <Spinner />
-	}
+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
+	// if (!systemData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }

 	return (
 		<div ref={chartRef}>
-			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
 				<AreaChart
 					accessibilityLayer
 					data={systemData}
@@ -80,7 +88,8 @@ export default function DiskIoChart({
 						fill="hsl(var(--chart-3))"
 						fillOpacity={0.4}
 						stroke="hsl(var(--chart-3))"
-						animationDuration={1200}
+						// animationDuration={1200}
+						isAnimationActive={false}
 					/>
 					<Area
 						dataKey="stats.dr"
@@ -89,7 +98,8 @@ export default function DiskIoChart({
 						fill="hsl(var(--chart-1))"
 						fillOpacity={0.4}
 						stroke="hsl(var(--chart-1))"
-						animationDuration={1200}
+						// animationDuration={1200}
+						isAnimationActive={false}
 					/>
 				</AreaChart>
 			</ChartContainer>
--- a/hub/site/src/components/charts/mem-chart.tsx
+++ b/hub/site/src/components/charts/mem-chart.tsx
@@ -1,9 +1,9 @@
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts'

 import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
-import { chartTimeData, formatShortDate, useYaxisWidth } from '@/lib/utils'
+import { chartTimeData, cn, formatShortDate, useYaxisWidth } from '@/lib/utils'
 import { useMemo, useRef } from 'react'
-import Spinner from '../spinner'
+// import Spinner from '../spinner'
 import { useStore } from '@nanostores/react'
 import { $chartTime } from '@/lib/stores'
 import { SystemStatsRecord } from '@/types'
@@ -19,18 +19,26 @@ export default function MemChart({
 	const chartRef = useRef<HTMLDivElement>(null)
 	const yAxisWidth = useYaxisWidth(chartRef)

+	const yAxisSet = useMemo(() => yAxisWidth !== 180, [yAxisWidth])
+
 	const totalMem = useMemo(() => {
 		const maxMem = Math.ceil(systemData[0]?.stats.m)
 		return maxMem > 2 && maxMem % 2 !== 0 ? maxMem + 1 : maxMem
 	}, [systemData])

-	if (!systemData.length || !ticks.length) {
-		return <Spinner />
-	}
+	// if (!systemData.length || !ticks.length) {
+	// 	return <Spinner />
+	// }

 	return (
 		<div ref={chartRef}>
-			<ChartContainer config={{}} className="h-full w-full absolute aspect-auto">
+			{/* {!yAxisSet && <Spinner />} */}
+			<ChartContainer
+				config={{}}
+				className={cn('h-full w-full absolute aspect-auto bg-card opacity-0 transition-opacity', {
+					'opacity-100': yAxisSet,
+				})}
+			>
 				<AreaChart
 					accessibilityLayer
 					data={systemData}
@@ -80,7 +88,8 @@ export default function MemChart({
 						fillOpacity={0.4}
 						stroke="hsl(var(--chart-2))"
 						stackId="a"
-						animationDuration={1200}
+						// animationDuration={1200}
+						isAnimationActive={false}
 					/>
 					<Area
 						dataKey="stats.mb"
@@ -91,7 +100,8 @@ export default function MemChart({
 						strokeOpacity={0.3}
 						stroke="hsl(var(--chart-2))"
 						stackId="a"
-						animationDuration={1200}
+						// animationDuration={1200}
+						isAnimationActive={false}
 					/>
 				</AreaChart>
 			</ChartContainer>