fix: loading skeleton

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>
   );

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">

app/[locale]/layout.tsx

@@ -37,7 +37,6 @@ export const viewport: Viewport = {
   userScalable: false,
 };
 
-
 export async function generateStaticParams() {
   return locales.map((locale) => ({ locale }));
 }