feat: add chart loading skeletons and enhance translation for time periods

src/components/NetworkChart.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
+import { m } from "framer-motion";
 import * as React from "react";
 import { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -44,12 +45,6 @@ interface ResultItem {
 	[key: string]: number;
 }
 
-const TIME_RANGE_OPTIONS: { value: MonitorPeriod; label: string }[] = [
-	{ value: "1d", label: "1D" },
-	{ value: "7d", label: "7D" },
-	{ value: "30d", label: "30D" },
-];
-
 /**
  * Helper method to calculate packet loss from delay data
  */
@@ -237,6 +232,12 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 }) {
 	const { t } = useTranslation();
 
+	const TIME_RANGE_OPTIONS: { value: MonitorPeriod; label: string }[] = [
+		{ value: "1d", label: t("monitor.period1d") },
+		{ value: "7d", label: t("monitor.period7d") },
+		{ value: "30d", label: t("monitor.period30d") },
+	];
+
 	const customBackgroundImage =
 		(window.CustomBackgroundImage as string) !== ""
 			? window.CustomBackgroundImage
@@ -529,6 +530,54 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 	}, [isPeakEnabled, activeCharts, formattedData, chartData, chartDataKey]);
 
 	return (
+		<div className="flex flex-col gap-3">
+			<div className="flex items-center gap-3 -mt-5 flex-wrap">
+				<div className="flex items-center gap-1 rounded-full bg-muted dark:bg-muted/40 p-0.5 border border-border/60 dark:border-border">
+					{TIME_RANGE_OPTIONS.map((option) => {
+						const isLocked = !isLogin && option.value !== "1d";
+						return (
+							<div
+								key={option.value}
+								onClick={() => {
+									if (!isLocked) {
+										onPeriodChange(option.value);
+									}
+								}}
+								className={cn(
+									"relative cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors duration-300",
+									period === option.value
+										? "text-foreground"
+										: "text-muted-foreground hover:text-foreground",
+									isLocked && "cursor-not-allowed opacity-40 grayscale",
+								)}
+							>
+								{period === option.value && (
+									<m.div
+										layoutId="network-period-selector-active"
+										className="absolute inset-0 z-10 h-full w-full bg-white dark:bg-background rounded-full ring-1 ring-border/60 dark:ring-border/40"
+										transition={{
+											type: "spring",
+											stiffness: 400,
+											damping: 30,
+										}}
+									/>
+								)}
+								<span className="relative z-20">{option.label}</span>
+							</div>
+						);
+					})}
+				</div>
+				<div className="flex items-center space-x-2">
+					<Switch
+						id="Peak"
+						checked={isPeakEnabled}
+						onCheckedChange={setIsPeakEnabled}
+					/>
+					<Label className="text-xs" htmlFor="Peak">
+						{t("monitor.peakCut")}
+					</Label>
+				</div>
+			</div>
 			<Card
 				className={cn({
 					"bg-card/70": customBackgroundImage,
@@ -542,42 +591,6 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 						<CardDescription className="text-xs">
 							{chartDataKey.length} {t("monitor.monitorCount")}
 						</CardDescription>
-					<div className="mt-0.5 flex items-center gap-3">
-						<div className="flex items-center gap-1 rounded-lg bg-muted/50 p-1">
-							{TIME_RANGE_OPTIONS.map((option) => {
-								const isLocked = !isLogin && option.value !== "1d";
-								return (
-									<button
-										key={option.value}
-										type="button"
-										disabled={isLocked}
-										onClick={() => {
-											if (!isLocked) {
-												onPeriodChange(option.value);
-											}
-										}}
-										className={`rounded-md px-2.5 py-1 text-xs font-medium transition-all duration-200 ${
-											period === option.value
-												? "bg-primary text-primary-foreground shadow-sm"
-												: "text-muted-foreground hover:bg-muted hover:text-foreground"
-										} ${isLocked ? "cursor-not-allowed opacity-50" : ""}`}
-									>
-										{option.label}
-									</button>
-								);
-							})}
-						</div>
-						<div className="flex items-center space-x-2">
-							<Switch
-								id="Peak"
-								checked={isPeakEnabled}
-								onCheckedChange={setIsPeakEnabled}
-							/>
-							<Label className="text-xs" htmlFor="Peak">
-								Peak cut
-							</Label>
-						</div>
-					</div>
 					</div>
 					<div className="flex flex-wrap w-full">{chartButtons}</div>
 				</CardHeader>
@@ -616,7 +629,8 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 
 											// 计算数据的总时间跨度（毫秒）
 											const timeSpan =
-											array[array.length - 1].created_at - array[0].created_at;
+												array[array.length - 1].created_at -
+												array[0].created_at;
 											const hours = timeSpan / (1000 * 60 * 60);
 
 											// 根据时间跨度调整显示间隔
@@ -630,7 +644,9 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 											}
 											// 超过12小时，每2小时显示一个刻度
 											const date = new Date(item.created_at);
-										return date.getMinutes() === 0 && date.getHours() % 2 === 0;
+											return (
+												date.getMinutes() === 0 && date.getHours() % 2 === 0
+											);
 										})
 										.map((item) => item.created_at)}
 									tickFormatter={(value) => {
@@ -687,7 +703,9 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 
 												return (
 													<div className="flex flex-1 items-center justify-between leading-none">
-													<span className="text-muted-foreground">{label}</span>
+														<span className="text-muted-foreground">
+															{label}
+														</span>
 														<span className="ml-2 font-medium text-foreground tabular-nums">
 															{formattedValue}
 														</span>
@@ -706,6 +724,7 @@ export const NetworkChartClient = React.memo(function NetworkChart({
 					</div>
 				</CardContent>
 			</Card>
+		</div>
 	);
 });
 

src/components/ServerDetailChart.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { m } from "framer-motion";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
@@ -32,6 +33,7 @@ import type {
 	NezhaWebsocketResponse,
 } from "@/types/nezha-api";
 
+import ChartSkeleton from "./loading/ChartSkeleton";
 import { ServerDetailChartLoading } from "./loading/ServerDetailLoading";
 import AnimatedCircularProgressBar from "./ui/animated-circular-progress-bar";
 
@@ -94,31 +96,41 @@ function PeriodSelector({
 	];
 
 	return (
-		<div className="flex gap-1 mb-3 flex-wrap -mt-5">
+		<div className="flex gap-0.5 mb-3 flex-wrap -mt-5 p-0.5 bg-muted dark:bg-muted/40 rounded-full w-fit border border-border/60 dark:border-border">
 			{periods.map((period) => {
 				// Only realtime and 1d are available for non-logged-in users
 				const isLocked =
 					!isLogin && period.value !== "realtime" && period.value !== "1d";
 				return (
-					<button
+					<div
 						key={period.value}
-						type="button"
-						disabled={isLocked}
 						onClick={() => {
 							if (!isLocked) {
 								onPeriodChange(period.value);
 							}
 						}}
 						className={cn(
-							"px-2.5 py-1 text-xs rounded-md transition-all",
+							"relative cursor-pointer rounded-full px-3 py-1.5 text-xs font-medium transition-colors duration-300",
 							selectedPeriod === period.value
-								? "bg-primary text-primary-foreground font-medium"
+								? "text-foreground"
-								: "bg-muted/50 hover:bg-muted text-muted-foreground hover:text-foreground",
+								: "text-muted-foreground hover:text-foreground",
-							isLocked && "cursor-not-allowed opacity-50",
+							isLocked && "cursor-not-allowed opacity-40 grayscale",
 						)}
 					>
+						{selectedPeriod === period.value && (
+							<m.div
+								layoutId="period-selector-active"
+								className="absolute inset-0 z-10 h-full w-full bg-white dark:bg-background rounded-full ring-1 ring-border/60 dark:ring-border/40"
+								transition={{ type: "spring", stiffness: 250, damping: 30 }}
+							/>
+						)}
+						<div className="relative z-20 flex items-center gap-1.5">
+							{period.value === "realtime" && (
+								<span className="inline-flex rounded-full h-1.5 w-1.5 bg-emerald-500 dark:bg-emerald-400"></span>
+							)}
 							{period.label}
-					</button>
+						</div>
+					</div>
 				);
 			})}
 		</div>
@@ -261,15 +273,24 @@ function useHistoricalData<T>(
 ) {
 	const [historicalData, setHistoricalData] = useState<T[]>([]);
 	const [isLoading, setIsLoading] = useState(false);
+	const [displayData, setDisplayData] = useState<T[]>([]);
+	const loadingTimerRef = useRef<NodeJS.Timeout | null>(null);
 
 	useEffect(() => {
 		if (period === "realtime") {
 			setHistoricalData([]);
+			setDisplayData([]);
+			if (loadingTimerRef.current) {
+				clearTimeout(loadingTimerRef.current);
+			}
 			return;
 		}
 
 		const fetchData = async () => {
+			loadingTimerRef.current = setTimeout(() => {
 				setIsLoading(true);
+			}, 200);
+
 			try {
 				const response = await fetchServerMetrics(
 					serverId,
@@ -281,10 +302,15 @@ function useHistoricalData<T>(
 						transformData(point.ts, point.value),
 					);
 					setHistoricalData(transformedData);
+					setDisplayData(transformedData);
 				}
 			} catch (error) {
 				console.error(`Failed to fetch ${metricName} metrics:`, error);
 			} finally {
+				if (loadingTimerRef.current) {
+					clearTimeout(loadingTimerRef.current);
+					loadingTimerRef.current = null;
+				}
 				setIsLoading(false);
 			}
 		};
@@ -292,7 +318,7 @@ function useHistoricalData<T>(
 		fetchData();
 	}, [serverId, metricName, period, transformData]);
 
-	return { historicalData, isLoading };
+	return { historicalData, displayData, isLoading };
 }
 
 function GpuChart({
@@ -328,12 +354,8 @@ function GpuChart({
 		[],
 	);
 
-	const { historicalData, isLoading } = useHistoricalData<gpuChartData>(
+	const { displayData: gpuHistoricalData, isLoading } =
-		id,
+		useHistoricalData<gpuChartData>(id, "gpu", period, transformGpuData);
-		"gpu",
-		period,
-		transformGpuData,
-	);
 
 	// 初始化历史数据
 	useEffect(() => {
@@ -397,7 +419,7 @@ function GpuChart({
 		},
 	} satisfies ChartConfig;
 
-	const displayData = period === "realtime" ? gpuChartData : historicalData;
+	const displayData = period === "realtime" ? gpuChartData : gpuHistoricalData;
 
 	return (
 		<Card
@@ -430,11 +452,7 @@ function GpuChart({
 						className="aspect-auto h-[130px] w-full"
 					>
 						{isLoading ? (
-							<div className="flex items-center justify-center h-full">
+							<ChartSkeleton />
-								<span className="text-xs text-muted-foreground">
-									Loading...
-								</span>
-							</div>
 						) : (
 							<AreaChart
 								syncId="serverDetailCharts"
@@ -532,12 +550,8 @@ function CpuChart({
 		[],
 	);
 
-	const { historicalData, isLoading } = useHistoricalData<cpuChartData>(
+	const { displayData: cpuHistoricalData, isLoading } =
-		data.id,
+		useHistoricalData<cpuChartData>(data.id, "cpu", period, transformCpuData);
-		"cpu",
-		period,
-		transformCpuData,
-	);
 
 	// 初始化历史数据
 	useEffect(() => {
@@ -602,7 +616,7 @@ function CpuChart({
 		},
 	} satisfies ChartConfig;
 
-	const displayData = period === "realtime" ? cpuChartData : historicalData;
+	const displayData = period === "realtime" ? cpuChartData : cpuHistoricalData;
 
 	return (
 		<Card
@@ -632,11 +646,7 @@ function CpuChart({
 						className="aspect-auto h-[130px] w-full"
 					>
 						{isLoading ? (
-							<div className="flex items-center justify-center h-full">
+							<ChartSkeleton />
-								<span className="text-xs text-muted-foreground">
-									Loading...
-								</span>
-							</div>
 						) : (
 							<AreaChart
 								syncId="serverDetailCharts"
@@ -737,7 +747,8 @@ function ProcessChart({
 		[],
 	);
 
-	const { historicalData, isLoading } = useHistoricalData<processChartData>(
+	const { displayData: processHistoricalData, isLoading } =
+		useHistoricalData<processChartData>(
 			data.id,
 			"process_count",
 			period,
@@ -807,7 +818,8 @@ function ProcessChart({
 		},
 	} satisfies ChartConfig;
 
-	const displayData = period === "realtime" ? processChartData : historicalData;
+	const displayData =
+		period === "realtime" ? processChartData : processHistoricalData;
 
 	return (
 		<Card
@@ -830,11 +842,7 @@ function ProcessChart({
 						className="aspect-auto h-[130px] w-full"
 					>
 						{isLoading ? (
-							<div className="flex items-center justify-center h-full">
+							<ChartSkeleton />
-								<span className="text-xs text-muted-foreground">
-									Loading...
-								</span>
-							</div>
 						) : (
 							<AreaChart
 								syncId="serverDetailCharts"
@@ -1114,11 +1122,7 @@ function MemChart({
 						className="aspect-auto h-[130px] w-full"
 					>
 						{isLoadingMem ? (
-							<div className="flex items-center justify-center h-full">
+							<ChartSkeleton />
-								<span className="text-xs text-muted-foreground">
-									Loading...
-								</span>
-							</div>
 						) : (
 							<AreaChart
 								syncId="serverDetailCharts"
@@ -1238,7 +1242,8 @@ function DiskChart({
 		[data.host.disk_total],
 	);
 
-	const { historicalData, isLoading } = useHistoricalData<diskChartData>(
+	const { displayData: diskHistoricalData, isLoading } =
+		useHistoricalData<diskChartData>(
 			data.id,
 			"disk",
 			period,
@@ -1308,7 +1313,8 @@ function DiskChart({
 		},
 	} satisfies ChartConfig;
 
-	const displayData = period === "realtime" ? diskChartData : historicalData;
+	const displayData =
+		period === "realtime" ? diskChartData : diskHistoricalData;
 
 	return (
 		<Card
@@ -1344,11 +1350,7 @@ function DiskChart({
 						className="aspect-auto h-[130px] w-full"
 					>
 						{isLoading ? (
-							<div className="flex items-center justify-center h-full">
+							<ChartSkeleton />
-								<span className="text-xs text-muted-foreground">
-									Loading...
-								</span>
-							</div>
 						) : (
 							<AreaChart
 								syncId="serverDetailCharts"
@@ -1615,11 +1617,7 @@ function NetworkChart({
 						className="aspect-auto h-[130px] w-full"
 					>
 						{isLoadingNetwork ? (
-							<div className="flex items-center justify-center h-full">
+							<ChartSkeleton />
-								<span className="text-xs text-muted-foreground">
-									Loading...
-								</span>
-							</div>
 						) : (
 							<LineChart
 								syncId="serverDetailCharts"
@@ -1876,11 +1874,7 @@ function ConnectChart({
 						className="aspect-auto h-[130px] w-full"
 					>
 						{isLoadingConnect ? (
-							<div className="flex items-center justify-center h-full">
+							<ChartSkeleton />
-								<span className="text-xs text-muted-foreground">
-									Loading...
-								</span>
-							</div>
 						) : (
 							<LineChart
 								syncId="serverDetailCharts"

src/components/loading/ChartSkeleton.tsx

@@ -0,0 +1,60 @@
+export default function ChartSkeleton() {
+	return (
+		<div className="h-[130px] w-full px-6 py-3">
+			<div className="relative h-full w-full animate-pulse">
+				<div className="absolute bottom-0 left-0 right-0 h-px bg-muted-foreground/20" />
+				<div className="absolute bottom-1 left-0 right-0 flex items-end justify-between gap-1 px-2">
+					<div
+						className="w-2 bg-muted-foreground/20 rounded-t"
+						style={{ height: "40%" }}
+					/>
+					<div
+						className="w-2 bg-muted-foreground/30 rounded-t"
+						style={{ height: "65%" }}
+					/>
+					<div
+						className="w-2 bg-muted-foreground/25 rounded-t"
+						style={{ height: "45%" }}
+					/>
+					<div
+						className="w-2 bg-muted-foreground/35 rounded-t"
+						style={{ height: "80%" }}
+					/>
+					<div
+						className="w-2 bg-muted-foreground/20 rounded-t"
+						style={{ height: "55%" }}
+					/>
+					<div
+						className="w-2 bg-muted-foreground/30 rounded-t"
+						style={{ height: "70%" }}
+					/>
+					<div
+						className="w-2 bg-muted-foreground/25 rounded-t"
+						style={{ height: "50%" }}
+					/>
+					<div
+						className="w-2 bg-muted-foreground/20 rounded-t"
+						style={{ height: "35%" }}
+					/>
+					<div
+						className="w-2 bg-muted-foreground/30 rounded-t"
+						style={{ height: "60%" }}
+					/>
+					<div
+						className="w-2 bg-muted-foreground/25 rounded-t"
+						style={{ height: "45%" }}
+					/>
+					<div
+						className="w-2 bg-muted-foreground/35 rounded-t"
+						style={{ height: "75%" }}
+					/>
+					<div
+						className="w-2 bg-muted-foreground/20 rounded-t"
+						style={{ height: "55%" }}
+					/>
+				</div>
+				<div className="absolute inset-0 bg-gradient-to-t from-background/20 via-transparent to-background/10 rounded-md" />
+			</div>
+		</div>
+	);
+}

src/locales/de/translation.json

@@ -47,7 +47,11 @@
 		"noData": "Kein Server Monitoring Daten, bitte fügen sie zuerst einen Monitor hinzu",
 		"avgDelay": "Latenz",
 		"packetLoss": "Paketverlust",
-		"clearSelections": "Löschen"
+		"clearSelections": "Löschen",
+		"peakCut": "Peak cut",
+		"period1d": "1 Tag",
+		"period7d": "7 Tage",
+		"period30d": "30 Tage"
 	},
 	"billingInfo": {
 		"error": "Fehler",

src/locales/en/translation.json

@@ -113,7 +113,11 @@
 		"avgDelay": "Latency",
 		"monitorCount": "Services",
 		"packetLoss": "Packet Loss",
-		"clearSelections": "Clear"
+		"clearSelections": "Clear",
+		"peakCut": "Peak cut",
+		"period1d": "1 Day",
+		"period7d": "7 Days",
+		"period30d": "30 Days"
 	},
 	"pwa": {
 		"offlineReady": "App ready to work offline",

src/locales/es/translation.json

@@ -93,7 +93,11 @@
 		"noData": "No hay datos de servidores, primero agregue un monitor de servicio",
 		"monitorCount": "Servicios",
 		"packetLoss": "Pérdida de paquetes",
-		"clearSelections": "Limpiar"
+		"clearSelections": "Limpiar",
+		"peakCut": "Peak cut",
+		"period1d": "1 Día",
+		"period7d": "7 Días",
+		"period30d": "30 Días"
 	},
 	"error": {
 		"pageNotFound": "Página no encontrada",

src/locales/ru/translation.json

@@ -100,7 +100,11 @@
 		"avgDelay": "Задержка",
 		"monitorCount": "Сервисы",
 		"packetLoss": "Потеря пакетов",
-		"clearSelections": "Очистить"
+		"clearSelections": "Очистить",
+		"peakCut": "Peak cut",
+		"period1d": "1 день",
+		"period7d": "7 дней",
+		"period30d": "30 дней"
 	},
 	"pwa": {
 		"newContent": "Доступен новый контент",

src/locales/ta/translation.json

@@ -95,7 +95,11 @@
 		"avgDelay": "சுணக்கம்",
 		"monitorCount": "சேவைகள்",
 		"packetLoss": "தொகுப்பு இழப்பு",
-		"clearSelections": "அழி"
+		"clearSelections": "அழி",
+		"peakCut": "Peak cut",
+		"period1d": "1 நாள்",
+		"period7d": "7 நாட்கள்",
+		"period30d": "30 நாட்கள்"
 	},
 	"pwa": {
 		"offlineReady": "ஆஃப்லைனில் வேலை செய்ய பயன்பாடு தயாராக உள்ளது",

src/locales/zh-CN/translation.json

@@ -114,7 +114,11 @@
 		"avgDelay": "延迟",
 		"monitorCount": "个监控服务",
 		"packetLoss": "丢包率",
-		"clearSelections": "清除"
+		"clearSelections": "清除",
+		"peakCut": "削峰",
+		"period1d": "1 天",
+		"period7d": "7 天",
+		"period30d": "30 天"
 	},
 	"pwa": {
 		"offlineReady": "应用可以离线使用了",

src/locales/zh-TW/translation.json

@@ -112,7 +112,11 @@
 		"avgDelay": "延遲",
 		"monitorCount": "個監控",
 		"packetLoss": "丟包率",
-		"clearSelections": "清除"
+		"clearSelections": "清除",
+		"peakCut": "削峰",
+		"period1d": "1 天",
+		"period7d": "7 天",
+		"period30d": "30 天"
 	},
 	"billingInfo": {
 		"remaining": "剩餘天數",