Merge branch 'main' into cloudflare

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { ServerDetailChartLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
-import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import { NezhaAPISafe, ServerApi } 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";
@@ -19,6 +19,7 @@ import {
   YAxis,
 } from "recharts";
 import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
 
 type cpuChartData = {
   timeStamp: string;
@@ -62,12 +63,23 @@ export default function ServerDetailChartClient({
 }) {
   const t = useTranslations("ServerDetailChartClient");
 
+  const { data: allFallbackData } = useSWRImmutable<ServerApi>(
+    "/api/server",
+    nezhaFetcher,
+  );
+  const fallbackData = allFallbackData?.result?.find(
+    (item) => item.id === server_id,
+  );
+
   const { data, error } = useSWR<NezhaAPISafe>(
     `/api/detail?server_id=${server_id}`,
     nezhaFetcher,
     {
       refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
       isVisible: () => show,
+      fallbackData,
+      revalidateOnMount: false,
+      revalidateIfStale: false,
     },
   );
 

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

@@ -1,7 +1,7 @@
 "use client";
 
 import { ServerDetailLoading } from "@/app/[locale]/(main)/ClientComponents/ServerDetailLoading";
-import { NezhaAPISafe } from "@/app/[locale]/types/nezha-api";
+import { NezhaAPISafe, ServerApi } from "@/app/[locale]/types/nezha-api";
 import { BackIcon } from "@/components/Icon";
 import ServerFlag from "@/components/ServerFlag";
 import { Badge } from "@/components/ui/badge";
@@ -12,6 +12,7 @@ import { useLocale, useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
 
 export default function ServerDetailClient({
   server_id,
@@ -46,11 +47,22 @@ export default function ServerDetailClient({
     }
   };
 
+  const { data: allFallbackData } = useSWRImmutable<ServerApi>(
+    "/api/server",
+    nezhaFetcher,
+  );
+  const fallbackData = allFallbackData?.result?.find(
+    (item) => item.id === server_id,
+  );
+
   const { data, error } = useSWR<NezhaAPISafe>(
     `/api/detail?server_id=${server_id}`,
     nezhaFetcher,
     {
       refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
+      fallbackData,
+      revalidateOnMount: false,
+      revalidateIfStale: false,
     },
   );
 

app/[locale]/(main)/header.tsx

@@ -26,6 +26,7 @@ function Header() {
       <section className="flex items-center justify-between">
         <section
           onClick={() => {
+            sessionStorage.removeItem("selectedTag");
             router.push(`/${locale}/`);
           }}
           className="flex cursor-pointer items-center text-base font-medium"

components/Switch.tsx

@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import { motion } from "framer-motion";
-import React, { useEffect, useRef, useState } from "react";
+import React, { createRef, useEffect, useRef, useState } from "react";
 
 export default function Switch({
   allTag,
@@ -14,6 +14,7 @@ export default function Switch({
   onTagChange: (tag: string) => void;
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
+  const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()));
 
   useEffect(() => {
     const savedTag = sessionStorage.getItem("selectedTag");
@@ -41,15 +42,27 @@ export default function Switch({
     };
   }, []);
 
+  useEffect(() => {
+    const currentTagRef = tagRefs.current[allTag.indexOf(nowTag)];
+    if (currentTagRef && currentTagRef.current) {
+      currentTagRef.current.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "center",
+      });
+    }
+  }, [nowTag]);
+
   return (
     <div
       ref={scrollRef}
       className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]"
     >
       <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
-        {allTag.map((tag) => (
+        {allTag.map((tag, index) => (
           <div
             key={tag}
+            ref={tagRefs.current[index]}
             onClick={() => onTagChange(tag)}
             className={cn(
               "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",