From adfea0be8e4e553b18636e34ea84dc28e5028fed Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 20 Oct 2024 13:09:56 +0800
Subject: [PATCH] fix: time loading

---
 app/[locale]/(main)/header.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/[locale]/(main)/header.tsx b/app/[locale]/(main)/header.tsx
index 523b2d1..cb335a9 100644
--- a/app/[locale]/(main)/header.tsx
+++ b/app/[locale]/(main)/header.tsx
@@ -3,6 +3,7 @@
 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";
 import { useTranslations } from "next-intl";
@@ -62,7 +63,7 @@ function Header() {
 
 // https://github.com/streamich/react-use/blob/master/src/useInterval.ts
 const useInterval = (callback: Function, delay?: number | null) => {
-  const savedCallback = useRef<Function>(() => {});
+  const savedCallback = useRef<Function>(() => { });
   useEffect(() => {
     savedCallback.current = callback;
   });
@@ -95,9 +96,9 @@ function Overview() {
         <p className="text-sm font-medium opacity-50">
           {t("p_2390-2457_wherethetimeis")}
         </p>
-        {mouted && (
+        {mouted ? (
           <p className="opacity-1 text-sm font-medium">{timeString}</p>
-        )}
+        ) : <Skeleton className="h-[20px] w-[50px] rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>}
       </div>
     </section>
   );