diff --git a/beszel/site/src/components/routes/system.tsx b/beszel/site/src/components/routes/system.tsx
index 84a0891..1934fcb 100644
--- a/beszel/site/src/components/routes/system.tsx
+++ b/beszel/site/src/components/routes/system.tsx
@@ -656,8 +656,14 @@ function ChartCard({
 				<CardDescription>{description}</CardDescription>
 				{cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:end-3.5">{cornerEl}</div>}
 			</CardHeader>
-			<div className="ps-0 w-[calc(100%-1.5em)] h-48 md:h-52 relative">
-				{<Spinner msg={empty ? t`Waiting for enough records to display` : undefined} />}
+			<div className="ps-0 w-[calc(100%-1.5em)] h-48 md:h-52 relative group">
+				{
+					<Spinner
+						msg={empty ? t`Waiting for enough records to display` : undefined}
+						// className="group-has-[.opacity-100]:opacity-0 transition-opacity"
+						className="group-has-[.opacity-100]:invisible duration-100"
+					/>
+				}
 				{isIntersecting && children}
 			</div>
 		</Card>
diff --git a/beszel/site/src/components/spinner.tsx b/beszel/site/src/components/spinner.tsx
index b19ec66..59f6b21 100644
--- a/beszel/site/src/components/spinner.tsx
+++ b/beszel/site/src/components/spinner.tsx
@@ -1,8 +1,9 @@
+import { cn } from "@/lib/utils"
 import { LoaderCircleIcon } from "lucide-react"
 
-export default function ({ msg }: { msg?: string }) {
+export default function ({ msg, className }: { msg?: string; className?: string }) {
 	return (
-		<div className="flex flex-col items-center justify-center h-full absolute inset-0">
+		<div className={cn(className, "flex flex-col items-center justify-center h-full absolute inset-0")}>
 			{msg ? (
 				<p className={"opacity-60 mb-2 text-center text-sm px-4"}>{msg}</p>
 			) : (