fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 17:59:28 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

change spinner to visibility hidden after chart loads

Browse Source
This commit is contained in:
Henry Dollman
2024-11-12 18:25:27 -05:00
parent 6043c59da8
commit e87af81db4
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
beszel/site/src/components/routes/system.tsx
View File

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

5
beszel/site/src/components/spinner.tsx
View File

@@ -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>
) : (