From 4f7eb074dfbaed933457333e8d7ee4478a730aaf Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Wed, 9 Oct 2024 13:40:01 +0800
Subject: [PATCH] fix: chart loading state

---
 .../(main)/ClientComponents/NetworkChart.tsx  |  4 ++-
 .../ClientComponents/NetworkChartLoading.tsx  | 30 +++++++++++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 app/[locale]/(main)/ClientComponents/NetworkChartLoading.tsx

diff --git a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx b/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
index e9b9bf0..9c888bd 100644
--- a/app/[locale]/(main)/ClientComponents/NetworkChart.tsx
+++ b/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: {
diff --git a/app/[locale]/(main)/ClientComponents/NetworkChartLoading.tsx b/app/[locale]/(main)/ClientComponents/NetworkChartLoading.tsx
new file mode 100644
index 0000000..11defdf
--- /dev/null
+++ b/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>
+  );
+}