fix: detail page loading Skeleton

README.md

@@ -13,7 +13,7 @@
 #### 环境变量
 
 | 变量名                         | 含义                     | 示例                                                          |
-| ------------------------------ | -------------------------------- | ------------------------------------------------------------- |
+| ------------------------------ | ------------------------ | ------------------------------------------------------------- |
 | NezhaBaseUrl                   | nezha 面板地址           | http://120.x.x.x:8008                                         |
 | NezhaAuth                      | nezha 面板 API Token     | 5hAY3QX6Nl9B3Uxxxx26KMvOMyXS1Udi                              |
 | DefaultLocale                  | 面板默认显示语言         | **默认**：en [简中:zh 繁中:zh-t 英语:en 日语:ja]              |

app/[locale]/(main)/ClientComponents/ServerDetailChartClient.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { ServerDetailChartLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
+import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
 import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
 import { Card, CardContent } from "@/components/ui/card";
 import { ChartConfig, ChartContainer } from "@/components/ui/chart";
@@ -18,8 +20,6 @@ import {
 } from "recharts";
 import useSWR from "swr";
 
-import { NezhaAPISafe } from "../../types/nezha-api";
-
 type cpuChartData = {
   timeStamp: string;
   cpu: number;
@@ -83,7 +83,7 @@ export default function ServerDetailChartClient({
       </>
     );
   }
-  if (!data) return null;
+  if (!data) return <ServerDetailChartLoading />;
 
   return (
     <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">

app/[locale]/(main)/ClientComponents/ServerDetailClient.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { ServerDetailLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
 import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
 import { BackIcon } from "@/components/Icon";
 import { Badge } from "@/components/ui/badge";
@@ -10,8 +11,6 @@ import { useLocale, useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import useSWR from "swr";
 
-import ServerDetailLoading from "./ServerDetailLoading";
-
 export default function ServerDetailClient({
   server_id,
 }: {

app/[locale]/(main)/ClientComponents/ServerDetailLoading.tsx

@@ -1,25 +1,11 @@
 import { BackIcon } from "@/components/Icon";
-import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
 import { useLocale } from "next-intl";
 import { useRouter } from "next/navigation";
 
-export default function ServerDetailLoading() {
+export function ServerDetailChartLoading() {
-  const router = useRouter();
-  const locale = useLocale();
   return (
     <div>
-      <div
-        onClick={() => {
-          router.push(`/${locale}/`);
-        }}
-        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
-      >
-        <BackIcon />
-        <Skeleton className="h-[20px] w-24 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
-      </div>
-      <Skeleton className="flex flex-wrap gap-2 h-[100px] w-1/2 mt-3 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
-      <Separator className="my-4" />
       <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
         <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
         <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
@@ -31,3 +17,23 @@ export default function ServerDetailLoading() {
     </div>
   );
 }
+
+export function ServerDetailLoading() {
+  const router = useRouter();
+  const locale = useLocale();
+
+  return (
+    <>
+      <div
+        onClick={() => {
+          router.push(`/${locale}/`);
+        }}
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+      >
+        <BackIcon />
+        <Skeleton className="h-[20px] w-24 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+      </div>
+      <Skeleton className="flex flex-wrap gap-2 h-[81px] w-1/2 mt-3 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+    </>
+  );
+}