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 {

beszel/site/src/components/routes/system.tsx

@@ -100,7 +100,7 @@ export default function SystemDetail({ name }: { name: string }) {
 	const netCardRef = useRef<HTMLDivElement>(null)
 	const [containerFilterBar, setContainerFilterBar] = useState(null as null | JSX.Element)
 	const [bottomSpacing, setBottomSpacing] = useState(0)
-	const [chartLoading, setChartLoading] = useState(false)
+	const [chartLoading, setChartLoading] = useState(true)
 	const isLongerChart = chartTime !== "1h"
 
 	useEffect(() => {
@@ -281,7 +281,7 @@ export default function SystemDetail({ name }: { name: string }) {
 		return null
 	}
 
-	// if no data, show empty state
+	// if no data, show empty message
 	const dataEmpty = !chartLoading && chartData.systemStats.length === 0
 
 	return (
@@ -594,6 +594,7 @@ function ChartCard({
 	cornerEl?: JSX.Element | null
 }) {
 	const { isIntersecting, ref } = useIntersectionObserver()
+	const { t } = useTranslation()
 
 	return (
 		<Card className={cn("pb-2 sm:pb-4 odd:last-of-type:col-span-full", { "col-span-full": !grid })} ref={ref}>
@@ -603,7 +604,7 @@ function ChartCard({
 				{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:right-3.5">{cornerEl}</div>}
 			</CardHeader>
 			<div className="pl-0 w-[calc(100%-1.6em)] h-52 relative">
-				{<Spinner empty={empty} />}
+				{<Spinner msg={empty ? t("monitor.waiting_for") : undefined} />}
 				{isIntersecting && children}
 			</div>
 		</Card>

beszel/site/src/components/spinner.tsx

@@ -1,12 +1,13 @@
 import { LoaderCircleIcon } from "lucide-react"
-import { useTranslation } from "react-i18next"
 
-export default function (props: { empty?: boolean }) {
-	const { t } = useTranslation()
+export default function ({ msg }: { msg?: string }) {
 	return (
 		<div className="flex flex-col items-center justify-center h-full absolute inset-0">
-			<LoaderCircleIcon className="animate-spin h-10 w-10 opacity-60" />
-			{props.empty && <p className={"opacity-60 mt-2"}>{t("monitor.waiting_for")}</p>}
+			{msg ? (
+				<p className={"opacity-60 mb-2 text-center px-4"}>{msg}</p>
+			) : (
+				<LoaderCircleIcon className="animate-spin h-10 w-10 opacity-60" />
+			)}
 		</div>
 	)
 }