From d295d549da76239c6dc0a6febc780559d68f7b81 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Sun, 5 Jul 2026 04:19:39 +0800
Subject: [PATCH] refactor: optimize ServerDetail loading and update MapTooltip
 positioning logic

---
 src/App.tsx                                  | 32 +++++---------------
 src/components/MapTooltip.tsx                | 10 +++++-
 src/test/components/info-components.test.tsx |  3 ++
 3 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 4205103..3240569 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -8,7 +8,6 @@ import { DashCommand } from "./components/DashCommand";
 import ErrorBoundary from "./components/ErrorBoundary";
 import Footer from "./components/Footer";
 import Header, { RefreshToast } from "./components/Header";
-import { Skeleton } from "./components/ui/skeleton";
 import { useBackground } from "./hooks/use-background";
 import { useTheme } from "./hooks/use-theme";
 import { InjectContext } from "./lib/inject";
@@ -18,29 +17,8 @@ import ErrorPage from "./pages/ErrorPage";
 import Server from "./pages/Server";
 
 const NotFound = lazy(() => import("./pages/NotFound"));
-const ServerDetail = lazy(() => import("./pages/ServerDetail"));
-
-function ServerDetailRouteFallback() {
-	return (
-		<div className="mx-auto w-full max-w-5xl px-0 flex flex-col gap-4">
-			<div>
-				<div className="flex flex-none items-center gap-0.5 text-xl">
-					<Skeleton className="h-5 w-5 rounded-[5px] bg-muted-foreground/10 animate-none" />
-					<Skeleton className="h-[20px] w-24 rounded-[5px] bg-muted-foreground/10 animate-none" />
-				</div>
-				<Skeleton className="flex flex-wrap gap-2 h-[81px] w-1/2 mt-3 rounded-[5px] bg-muted-foreground/10 animate-none" />
-			</div>
-			<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 className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none" />
-				<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none" />
-				<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none" />
-				<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none" />
-				<Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none" />
-			</section>
-		</div>
-	);
-}
+const loadServerDetail = () => import("./pages/ServerDetail");
+const ServerDetail = lazy(loadServerDetail);
 
 // Route checker component
 const RouteChecker: React.FC = () => {
@@ -59,6 +37,10 @@ const MainApp: React.FC = () => {
 	const [isCustomCodeInjected, setIsCustomCodeInjected] = useState(false);
 	const { backgroundImage: customBackgroundImage } = useBackground();
 
+	useEffect(() => {
+		loadServerDetail();
+	}, []);
+
 	useEffect(() => {
 		if (settingData?.data?.config?.custom_code) {
 			InjectContext(settingData?.data?.config?.custom_code);
@@ -137,7 +119,7 @@ const MainApp: React.FC = () => {
 						<Route
 							path="/server/:id"
 							element={
-								<Suspense fallback={<ServerDetailRouteFallback />}>
+								<Suspense fallback={null}>
 									<ServerDetail />
 								</Suspense>
 							}
diff --git a/src/components/MapTooltip.tsx b/src/components/MapTooltip.tsx
index d8da965..0a39a90 100644
--- a/src/components/MapTooltip.tsx
+++ b/src/components/MapTooltip.tsx
@@ -11,14 +11,22 @@ const MapTooltip = memo(function MapTooltip() {
 
 	if (!tooltipData) return null;
 
+	const verticalPlacement =
+		tooltipData.centroid[1] < 120
+			? "translate(20%, 8px)"
+			: tooltipData.centroid[1] > 380
+				? "translate(20%, calc(-100% - 8px))"
+				: "translate(20%, -50%)";
+
 	return (
 		<div
 			className="tooltip-animate absolute hidden lg:block bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm dark:border dark:border-neutral-700 z-50"
+			data-testid="map-tooltip"
 			key={tooltipData.country}
 			style={{
 				left: tooltipData.centroid[0],
 				top: tooltipData.centroid[1],
-				transform: "translate(20%, -50%)",
+				transform: verticalPlacement,
 			}}
 			onMouseEnter={(e) => {
 				e.stopPropagation();
diff --git a/src/test/components/info-components.test.tsx b/src/test/components/info-components.test.tsx
index 11036c6..bbed08e 100644
--- a/src/test/components/info-components.test.tsx
+++ b/src/test/components/info-components.test.tsx
@@ -161,6 +161,9 @@ describe("MapTooltip", () => {
 		);
 
 		expect(await screen.findByText("Mainland China")).toBeInTheDocument();
+		expect(screen.getByTestId("map-tooltip")).toHaveStyle({
+			transform: "translate(20%, 8px)",
+		});
 		expect(screen.getByText("2 map.Servers")).toBeInTheDocument();
 		await user.click(screen.getByRole("button", { name: /edge-2/ }));