feat: refactor custom code

src/App.tsx

@@ -1,14 +1,71 @@
-import React from "react"
+import { useQuery } from "@tanstack/react-query"
+import React, { useCallback, useEffect } from "react"
 import { Route, BrowserRouter as Router, Routes } from "react-router-dom"
 
 import Footer from "./components/Footer"
 import Header from "./components/Header"
+import { fetchSetting } from "./lib/nezha-api"
 import ErrorPage from "./pages/ErrorPage"
 import NotFound from "./pages/NotFound"
 import Server from "./pages/Server"
 import ServerDetail from "./pages/ServerDetail"
 
 const App: React.FC = () => {
+  const { data: settingData, error } = useQuery({
+    queryKey: ["setting"],
+    queryFn: () => fetchSetting(),
+    refetchOnMount: true,
+    refetchOnWindowFocus: true,
+  })
+
+  const InjectContext = useCallback((content: string) => {
+    const tempDiv = document.createElement("div")
+    tempDiv.innerHTML = content
+
+    const handlers: { [key: string]: (element: HTMLElement) => void } = {
+      SCRIPT: (element) => {
+        const script = document.createElement("script")
+        if ((element as HTMLScriptElement).src) {
+          script.src = (element as HTMLScriptElement).src
+        } else {
+          script.textContent = element.textContent
+        }
+        document.body.appendChild(script)
+      },
+      STYLE: (element) => {
+        const style = document.createElement("style")
+        style.textContent = element.textContent
+        document.head.appendChild(style)
+      },
+      DEFAULT: (element) => {
+        document.body.appendChild(element)
+      },
+    }
+
+    Array.from(tempDiv.childNodes).forEach((node) => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as HTMLElement
+        ;(handlers[element.tagName] || handlers.DEFAULT)(element)
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        document.body.appendChild(document.createTextNode(node.textContent || ""))
+      }
+    })
+  }, [])
+
+  useEffect(() => {
+    if (settingData?.data?.custom_code) {
+      InjectContext(settingData?.data?.custom_code)
+    }
+  }, [settingData?.data?.custom_code])
+
+  if (error) {
+    return <ErrorPage code={500} message={error.message} />
+  }
+
+  if (!settingData) {
+    return null
+  }
+
   return (
     <Router basename={import.meta.env.BASE_URL}>
       <div className="flex min-h-screen w-full flex-col">

src/components/Header.tsx

@@ -4,7 +4,7 @@ import { Skeleton } from "@/components/ui/skeleton"
 import { fetchLoginUser, fetchSetting } from "@/lib/nezha-api"
 import { useQuery } from "@tanstack/react-query"
 import { DateTime } from "luxon"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
@@ -23,50 +23,10 @@ function Header() {
 
   const siteName = settingData?.data?.site_name
 
-  const InjectContext = useCallback((content: string) => {
-    const tempDiv = document.createElement("div")
-    tempDiv.innerHTML = content
-
-    const handlers: { [key: string]: (element: HTMLElement) => void } = {
-      SCRIPT: (element) => {
-        const script = document.createElement("script")
-        if ((element as HTMLScriptElement).src) {
-          script.src = (element as HTMLScriptElement).src
-        } else {
-          script.textContent = element.textContent
-        }
-        document.body.appendChild(script)
-      },
-      STYLE: (element) => {
-        const style = document.createElement("style")
-        style.textContent = element.textContent
-        document.head.appendChild(style)
-      },
-      DEFAULT: (element) => {
-        document.body.appendChild(element)
-      },
-    }
-
-    Array.from(tempDiv.childNodes).forEach((node) => {
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        const element = node as HTMLElement
-        ;(handlers[element.tagName] || handlers.DEFAULT)(element)
-      } else if (node.nodeType === Node.TEXT_NODE) {
-        document.body.appendChild(document.createTextNode(node.textContent || ""))
-      }
-    })
-  }, [])
-
   useEffect(() => {
     document.title = siteName || "NEZHA"
   }, [siteName])
 
-  useEffect(() => {
-    if (settingData?.data?.custom_code) {
-      InjectContext(settingData?.data?.custom_code)
-    }
-  }, [settingData?.data?.custom_code])
-
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between">

src/components/ServerCard.tsx

@@ -28,7 +28,7 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
 
   const showFlag = true
   // @ts-expect-error ShowNetTransfer is a global variable
-  const disableShowNetTransfer = window.ShowNetTransfer === "false"
+  const showNetTransfer = window.ShowNetTransfer === "true"
 
   const parsedData = parsePublicNote(public_note)
 
@@ -123,7 +123,7 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
               </div>
             </div>
           </section>
-          {!disableShowNetTransfer && (
+          {showNetTransfer && (
             <section className={"flex items-center justify-between gap-1"}>
               <Badge
                 variant="secondary"
@@ -146,7 +146,7 @@ export default function ServerCard({ now, serverInfo }: { now: number; serverInf
     <Card
       className={cn(
         "flex flex-col items-center justify-start gap-3 p-3 md:px-5 lg:flex-row cursor-pointer hover:bg-accent/50 transition-colors",
-        !disableShowNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]",
+        showNetTransfer ? "lg:min-h-[91px] min-h-[123px]" : "lg:min-h-[61px] min-h-[93px]",
       )}
       onClick={() => navigate(`/server/${serverInfo.id}`, { replace: true })}
     >

src/components/ServerOverview.tsx

@@ -29,6 +29,9 @@ export default function ServerOverview({
   const { status, setStatus } = useStatus()
   const { filter, setFilter } = useFilter()
 
+  // @ts-expect-error DisableAnimatedMan is a global variable
+  const disableAnimatedMan = window.DisableAnimatedMan === "true"
+
   return (
     <>
       <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
@@ -142,11 +145,14 @@ export default function ServerOverview({
                 </p>
               </section>
             </section>
-            <img
+            {!disableAnimatedMan && (
-              className="absolute right-3 top-[-85px] z-10 w-20 scale-90 group-hover:opacity-50 md:scale-100 transition-all"
+              <img
-              alt={"animated-man"}
+                className="absolute right-3 top-[-85px] z-10 w-20 scale-90 group-hover:opacity-50 md:scale-100 transition-all"
-              src={"/animated-man.webp"}
+                alt={"animated-man"}
-            />
+                src={"/animated-man.webp"}
+                loading="eager"
+              />
+            )}
           </CardContent>
         </Card>
       </section>