fix: chart loading state

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

@@ -24,6 +24,8 @@ import { BackIcon } from "@/components/Icon";
 import { useRouter } from "next/navigation";
 import { useLocale } from "next-intl";
 import { useTranslations } from "next-intl";
+import NetworkChartLoading from "./NetworkChartLoading";
+
 export function NetworkChartClient({ server_id }: { server_id: number }) {
   const t = useTranslations("NetworkChartClient");
   const { data, error } = useSWR<ServerMonitorChart>(
@@ -37,7 +39,7 @@ export function NetworkChartClient({ server_id }: { server_id: number }) {
         <p className="text-sm font-medium opacity-40">{error.message}</p>
       </div>
     );
-  if (!data) return null;
+  if (!data) return <NetworkChartLoading />;
 
   const initChartConfig = {
     avg_delay: {

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

@@ -0,0 +1,30 @@
+import { BackIcon } from "@/components/Icon";
+import { Loader } from "@/components/loading/Loader";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function NetworkChartLoading() {
+  return (
+    <Card>
+      <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
+        <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} />
+          </CardTitle>
+          <CardDescription className="text-xs opacity-0">
+            loading...
+          </CardDescription>
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <div className="aspect-auto h-[250px] w-full flex-col items-center justify-center"></div>
+      </CardContent>
+    </Card>
+  );
+}