root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add loading skeleton for time display in overview section

Browse Source
This commit is contained in:
hamster1963 2025-02-28 09:21:43 +08:00
parent 28d1399b2f
commit 8bb5ea0cf7
3 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
app/(main)/header.tsx
View File

@ -4,6 +4,7 @@ import AnimateCountClient from "@/components/AnimatedCount"
import { LanguageSwitcher } from "@/components/LanguageSwitcher" import { LanguageSwitcher } from "@/components/LanguageSwitcher"
import { ModeToggle } from "@/components/ThemeSwitcher" import { ModeToggle } from "@/components/ThemeSwitcher"
import { Separator } from "@/components/ui/separator" import { Separator } from "@/components/ui/separator"
import { Skeleton } from "@/components/ui/skeleton"
import getEnv from "@/lib/env-entry" import getEnv from "@/lib/env-entry"
import { DateTime } from "luxon" import { DateTime } from "luxon"
@ -71,19 +72,30 @@ const Links = memo(function Links() {
const Overview = memo(function Overview() { const Overview = memo(function Overview() {
const t = useTranslations("Overview") const t = useTranslations("Overview")
const time = useCurrentTime() const time = useCurrentTime()
const [mounted, setMounted] = useState(false)
useEffect(() => {
setMounted(true)
}, [])
return ( return (
<section className={"mt-10 flex flex-col md:mt-16"}> <section className={"mt-10 flex flex-col md:mt-16"}>
<p className="font-semibold text-base">{t("p_2277-2331_Overview")}</p> <p className="font-semibold text-base">{t("p_2277-2331_Overview")}</p>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<p className="font-medium text-sm opacity-50">{t("p_2390-2457_wherethetimeis")}</p> <p className="font-medium text-sm opacity-50">{t("p_2390-2457_wherethetimeis")}</p>
<div className="flex items-center font-medium text-sm"> {mounted ? (
<AnimateCountClient count={time.hh} minDigits={2} /> <div className="flex items-center font-medium text-sm">
<span className="mb-[1px] font-medium text-sm opacity-50">:</span> <AnimateCountClient count={time.hh} minDigits={2} />
<AnimateCountClient count={time.mm} minDigits={2} /> <span className="mb-[1px] font-medium text-sm opacity-50">:</span>
<span className="mb-[1px] font-medium text-sm opacity-50">:</span> <AnimateCountClient count={time.mm} minDigits={2} />
<span className="font-medium text-sm">{time.ss.toString().padStart(2, "0")}</span> <span className="mb-[1px] font-medium text-sm opacity-50">:</span>
</div> <span className="font-medium text-sm">
<AnimateCountClient count={time.ss} minDigits={2} />
</span>
</div>
) : (
<Skeleton className="h-[21px] w-16 animate-none rounded-[5px] bg-muted-foreground/10" />
)}
</div> </div>
</section> </section>
) )

BIN
bun.lockb
View File

Binary file not shown.

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 15 KiB