fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-20 02:09: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> <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>} {cornerEl && <div className="relative py-1 block sm:w-44 sm:absolute sm:top-2.5 sm:end-3.5">{cornerEl}</div>}
</CardHeader> </CardHeader>
<div className="ps-0 w-[calc(100%-1.5em)] h-48 md:h-52 relative"> <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} />} {
<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} {isIntersecting && children}
</div> </div>
</Card> </Card>

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

@@ -1,8 +1,9 @@
import { cn } from "@/lib/utils"
import { LoaderCircleIcon } from "lucide-react" import { LoaderCircleIcon } from "lucide-react"
export default function ({ msg }: { msg?: string }) { export default function ({ msg, className }: { msg?: string; className?: string }) {
return ( 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 ? ( {msg ? (
<p className={"opacity-60 mb-2 text-center text-sm px-4"}>{msg}</p> <p className={"opacity-60 mb-2 text-center text-sm px-4"}>{msg}</p>
) : ( ) : (