From 8bb5ea0cf703dbe1b06f3159c1e2ac9a126ee7a2 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Fri, 28 Feb 2025 09:21:43 +0800
Subject: [PATCH] feat: add loading skeleton for time display in overview
 section

---
 app/(main)/header.tsx |  26 +++++++++++++++++++-------
 bun.lockb             | Bin 466234 -> 466234 bytes
 public/favicon.ico    | Bin 15406 -> 0 bytes
 3 files changed, 19 insertions(+), 7 deletions(-)
 delete mode 100644 public/favicon.ico

diff --git a/app/(main)/header.tsx b/app/(main)/header.tsx
index bd60a04..aedcf3d 100644
--- a/app/(main)/header.tsx
+++ b/app/(main)/header.tsx
@@ -4,6 +4,7 @@ import AnimateCountClient from "@/components/AnimatedCount"
 import { LanguageSwitcher } from "@/components/LanguageSwitcher"
 import { ModeToggle } from "@/components/ThemeSwitcher"
 import { Separator } from "@/components/ui/separator"
+import { Skeleton } from "@/components/ui/skeleton"
 
 import getEnv from "@/lib/env-entry"
 import { DateTime } from "luxon"
@@ -71,19 +72,30 @@ const Links = memo(function Links() {
 const Overview = memo(function Overview() {
   const t = useTranslations("Overview")
   const time = useCurrentTime()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
 
   return (
     <section className={"mt-10 flex flex-col md:mt-16"}>
       <p className="font-semibold text-base">{t("p_2277-2331_Overview")}</p>
       <div className="flex items-center gap-1">
         <p className="font-medium text-sm opacity-50">{t("p_2390-2457_wherethetimeis")}</p>
-        <div className="flex items-center font-medium text-sm">
-          <AnimateCountClient count={time.hh} minDigits={2} />
-          <span className="mb-[1px] font-medium text-sm opacity-50">:</span>
-          <AnimateCountClient count={time.mm} minDigits={2} />
-          <span className="mb-[1px] font-medium text-sm opacity-50">:</span>
-          <span className="font-medium text-sm">{time.ss.toString().padStart(2, "0")}</span>
-        </div>
+        {mounted ? (
+          <div className="flex items-center font-medium text-sm">
+            <AnimateCountClient count={time.hh} minDigits={2} />
+            <span className="mb-[1px] font-medium text-sm opacity-50">:</span>
+            <AnimateCountClient count={time.mm} minDigits={2} />
+            <span className="mb-[1px] font-medium text-sm opacity-50">:</span>
+            <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>
     </section>
   )
diff --git a/bun.lockb b/bun.lockb
index ca0676fd7a4d435db01f387e6883f58507920f26..925213cf93036d18e3b7788f6156139ac650887c 100755
GIT binary patch
delta 116
zcmdnBOJ>(DnT8g|7N!>FEi5mlTNvpXF!(VrFo-ZPG!#SzACY;nWEux!oQa-+o+SfA
z5>SR4C^Jz%s#k5RttC*#$Vku7SkH92!VH#FM$7GOGgu;+nSrKEe>j`Pn9+2*=p2^$
S{}>J1x6WeSzI7H`YZCz4ts|KL

delta 116
zcmdnBOJ>(DnT8g|7N!>FEi5mlTNvt@Gx#wuFo-ZPG!#SzACY;nWEux!oQa+RP=X-|
zD8mhunW!JttG3nF5-4M2q-SWXXEI%321_cV`S!LMED_AiKvSkaoXuj)XtG^&4$J(1
Rj0WvnXR&VII*YBf2>{$?Bc1>N

diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index 5cd8afc11be147dbf2489e9f72ebf08d9f2a4ce4..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 15406
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