spinner tweaks

beszel/site/src/components/charts/area-chart.tsx

@@ -68,6 +68,10 @@ export default memo(function AreaChartDefault({
 
 	// console.log('Rendered at', new Date())
 
+	if (chartData.systemStats.length === 0) {
+		return null
+	}
+
 	return (
 		<div>
 			<ChartContainer

beszel/site/src/components/charts/container-chart.tsx

@@ -125,6 +125,10 @@ export default memo(function ContainerChart({
 
 	// console.log('rendered at', new Date())
 
+	if (containerData.length === 0) {
+		return null
+	}
+
 	return (
 		<div>
 			<ChartContainer

beszel/site/src/components/charts/disk-chart.tsx

@@ -24,6 +24,10 @@ export default memo(function DiskChart({
 }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
+	if (chartData.systemStats.length === 0) {
+		return null
+	}
+
 	return (
 		<div>
 			<ChartContainer

beszel/site/src/components/charts/mem-chart.tsx

@@ -12,6 +12,10 @@ export default memo(function MemChart({ chartData }: { chartData: ChartData }) {
 
 	// console.log('rendered at', new Date())
 
+	if (chartData.systemStats.length === 0) {
+		return null
+	}
+
 	return (
 		<div>
 			{/* {!yAxisSet && <Spinner />} */}

beszel/site/src/components/charts/swap-chart.tsx

@@ -15,6 +15,10 @@ import { memo } from "react"
 export default memo(function SwapChart({ chartData }: { chartData: ChartData }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
+	if (chartData.systemStats.length === 0) {
+		return null
+	}
+
 	return (
 		<div>
 			<ChartContainer

beszel/site/src/components/charts/temperature-chart.tsx

@@ -22,6 +22,10 @@ import { memo, useMemo } from "react"
 export default memo(function TemperatureChart({ chartData }: { chartData: ChartData }) {
 	const { yAxisWidth, updateYAxisWidth } = useYAxisWidth()
 
+	if (chartData.systemStats.length === 0) {
+		return null
+	}
+
 	/** Format temperature data for chart and assign colors */
 	const newChartData = useMemo(() => {
 		const newChartData = { data: [], colors: {} } as {