root/nezha_dash
1
0
Fork 0
mirror of https://github.com/hamster1963/nezha-dash.git synced 2025-04-24 21:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: detail page loading Skeleton

Browse Source
This commit is contained in:
hamster1963 2024-10-20 13:03:14 +08:00
parent f8032070db
commit 7bed9cf4ba
4 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

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

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

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

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

@ -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,
}: {

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

@ -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() {
const router = useRouter();
const locale = useLocale();
export function ServerDetailChartLoading() {
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>
</>
);
}