From 219ee32137d34092735061f966e5aa99ed724d09 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Wed, 9 Oct 2024 14:35:38 +0800
Subject: [PATCH] fix: loading skeleton

---
 .../ClientComponents/NetworkChartLoading.tsx  | 19 +++++++------------
 app/[locale]/(main)/[id]/page.tsx             |  2 --
 app/[locale]/layout.tsx                       |  1 -
 3 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/app/[locale]/(main)/ClientComponents/NetworkChartLoading.tsx b/app/[locale]/(main)/ClientComponents/NetworkChartLoading.tsx
index 11defdf..6c23ac6 100644
--- a/app/[locale]/(main)/ClientComponents/NetworkChartLoading.tsx
+++ b/app/[locale]/(main)/ClientComponents/NetworkChartLoading.tsx
@@ -1,12 +1,6 @@
 import { BackIcon } from "@/components/Icon";
 import { Loader } from "@/components/loading/Loader";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default function NetworkChartLoading() {
   return (
@@ -15,15 +9,16 @@ export default function NetworkChartLoading() {
         <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5">
           <CardTitle className="flex items-center gap-0.5 text-xl">
             <BackIcon />
-            <Loader visible={true} />
+            <div className="aspect-auto h-[20px] w-24 bg-muted"></div>
           </CardTitle>
-          <CardDescription className="text-xs opacity-0">
-            loading...
-          </CardDescription>
+          <div className="mt-[2px] aspect-auto h-[14px] w-32 bg-muted"></div>
+        </div>
+        <div className="hidden pr-4 pt-4 sm:block">
+          <Loader visible={true} />
         </div>
       </CardHeader>
       <CardContent className="px-2 sm:p-6">
-        <div className="aspect-auto h-[250px] w-full flex-col items-center justify-center"></div>
+        <div className="aspect-auto h-[250px] w-full"></div>
       </CardContent>
     </Card>
   );
diff --git a/app/[locale]/(main)/[id]/page.tsx b/app/[locale]/(main)/[id]/page.tsx
index bef3ff5..de1a312 100644
--- a/app/[locale]/(main)/[id]/page.tsx
+++ b/app/[locale]/(main)/[id]/page.tsx
@@ -1,7 +1,5 @@
 import { NetworkChartClient } from "../ClientComponents/NetworkChart";
 
-
-
 export default function Page({ params }: { params: { id: string } }) {
   return (
     <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index b21c7f3..8bc866f 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -37,7 +37,6 @@ export const viewport: Viewport = {
   userScalable: false,
 };
 
-
 export async function generateStaticParams() {
   return locales.map((locale) => ({ locale }));
 }