From 439f19e209a39aa2c10384692886ce6ddce57301 Mon Sep 17 00:00:00 2001
From: Lemon-miaow <admin@lemonmiaow.xyz>
Date: Sat, 4 Jul 2026 00:32:38 +0800
Subject: [PATCH] fix(panel): prevent page collapse and scroll shifts in
 players and bans management sections during reload

---
 panel/src/components/players/BansSection.tsx      | 5 +++--
 panel/src/components/players/WhitelistSection.tsx | 5 +++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/panel/src/components/players/BansSection.tsx b/panel/src/components/players/BansSection.tsx
index 97462f1..83b2954 100644
--- a/panel/src/components/players/BansSection.tsx
+++ b/panel/src/components/players/BansSection.tsx
@@ -4,6 +4,7 @@ import { Ban, Loader2, RotateCw, Undo2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { api, humanizeError } from "@/lib/api";
 import { useAsync } from "@/lib/hooks";
+import { cn } from "@/lib/utils";
 import {
   CollapsibleSection,
   FeedbackLine,
@@ -180,7 +181,7 @@ export function BansSection({ name }: { name: string }) {
           )}
         </div>
 
-        {loading ? (
+        {loading && !data ? (
           <div className="flex items-center gap-2 py-2 text-xs text-muted-foreground">
             <Loader2 className="h-3.5 w-3.5 animate-spin" /> {t("log_connecting")}
           </div>
@@ -192,7 +193,7 @@ export function BansSection({ name }: { name: string }) {
             <p className="mt-1 text-xs text-muted-foreground/80">{t("access_ban_empty_hint")}</p>
           </div>
         ) : (
-          <div className="space-y-2">
+          <div className={cn("space-y-2 transition-opacity", loading && "opacity-60 pointer-events-none")}>
             {showSearch && <SearchBox value={query} onChange={onQuery} />}
 
             <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
diff --git a/panel/src/components/players/WhitelistSection.tsx b/panel/src/components/players/WhitelistSection.tsx
index d8e6459..7342e69 100644
--- a/panel/src/components/players/WhitelistSection.tsx
+++ b/panel/src/components/players/WhitelistSection.tsx
@@ -4,6 +4,7 @@ import { ListChecks, Loader2, Plus, RotateCw, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { api, humanizeError } from "@/lib/api";
 import { useAsync } from "@/lib/hooks";
+import { cn } from "@/lib/utils";
 import {
   CollapsibleSection,
   FeedbackLine,
@@ -131,7 +132,7 @@ export function WhitelistSection({ name, defaultOpen = false }: { name: string;
           {invalid && <p className="text-xs text-destructive">{t("access_player_invalid")}</p>}
         </div>
 
-        {loading ? (
+        {loading && !data ? (
           <div className="flex items-center gap-2 py-2 text-xs text-muted-foreground">
             <Loader2 className="h-3.5 w-3.5 animate-spin" /> {t("log_connecting")}
           </div>
@@ -145,7 +146,7 @@ export function WhitelistSection({ name, defaultOpen = false }: { name: string;
             </p>
           </div>
         ) : (
-          <div className="space-y-2">
+          <div className={cn("space-y-2 transition-opacity", loading && "opacity-60 pointer-events-none")}>
             {showSearch && <SearchBox value={query} onChange={onQuery} />}
 
             <div className="grid grid-cols-1 gap-2.5 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">