fix: (web) prevent flickering during refresh

- Track isInitialLoading separately from isRefreshing
- Only show skeleton on initial page load (when quests is empty)
- During refresh, keep existing content visible
- Spinning refresh icon indicates refresh in progress without clearing table

web/src/components/quest-table.tsx

@@ -16,7 +16,8 @@ interface QuestListItem {
 
 interface QuestTableProps {
     quests: QuestListItem[];
-    isLoading: boolean;
+    isInitialLoading: boolean;
+    isRefreshing: boolean;
     onRefresh?: () => void;
 }
 
@@ -211,14 +212,16 @@ function QuestTableContent({ quests }: { quests: QuestListItem[] }) {
     );
 }
 
-export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
+export function QuestTable({ quests, isInitialLoading, isRefreshing, onRefresh }: QuestTableProps) {
+    const showSkeleton = isInitialLoading && quests.length === 0;
+
     return (
         <Card className="glass-card overflow-hidden">
             <CardHeader className="pb-3">
                 <div className="flex items-center justify-between">
                     <CardTitle className="text-xl font-bold text-primary">Quest Inventory</CardTitle>
                     <div className="flex items-center gap-3">
-                        {isLoading ? (
+                        {showSkeleton ? (
                             <Badge variant="secondary" className="animate-pulse">
                                 Loading...
                             </Badge>
@@ -229,10 +232,10 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
                         )}
                         <button
                             onClick={onRefresh}
-                            disabled={isLoading}
+                            disabled={isRefreshing}
                             className={cn(
                                 "p-2 rounded-md hover:bg-muted/50 transition-colors",
-                                isLoading && "cursor-wait"
+                                isRefreshing && "cursor-wait"
                             )}
                             title="Refresh quests"
                         >
@@ -248,7 +251,7 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
                                 strokeLinejoin="round"
                                 className={cn(
                                     "text-muted-foreground transition-transform",
-                                    isLoading && "animate-spin"
+                                    isRefreshing && "animate-spin"
                                 )}
                             >
                                 <path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
@@ -261,7 +264,7 @@ export function QuestTable({ quests, isLoading, onRefresh }: QuestTableProps) {
                 </div>
             </CardHeader>
             <CardContent>
-                {isLoading ? (
+                {showSkeleton ? (
                     <QuestTableSkeleton />
                 ) : (
                     <QuestTableContent quests={quests} />

web/src/pages/AdminQuests.tsx

@@ -15,12 +15,16 @@ interface QuestListItem {
 
 export function AdminQuests() {
     const [quests, setQuests] = React.useState<QuestListItem[]>([]);
-    const [isLoading, setIsLoading] = React.useState(true);
-    const [refreshKey, setRefreshKey] = React.useState(0);
+    const [isInitialLoading, setIsInitialLoading] = React.useState(true);
+    const [isRefreshing, setIsRefreshing] = React.useState(false);
     const [lastCreatedQuestId, setLastCreatedQuestId] = React.useState<number | null>(null);
 
-    const fetchQuests = React.useCallback(async () => {
-        setIsLoading(true);
+    const fetchQuests = React.useCallback(async (isRefresh = false) => {
+        if (isRefresh) {
+            setIsRefreshing(true);
+        } else {
+            setIsInitialLoading(true);
+        }
         try {
             const response = await fetch("/api/quests");
             if (!response.ok) {
@@ -36,12 +40,13 @@ export function AdminQuests() {
                 description: error instanceof Error ? error.message : "Unknown error",
             });
         } finally {
-            setIsLoading(false);
+            setIsInitialLoading(false);
+            setIsRefreshing(false);
         }
     }, []);
 
     React.useEffect(() => {
-        fetchQuests();
+        fetchQuests(false);
     }, [fetchQuests]);
 
     React.useEffect(() => {
@@ -59,7 +64,7 @@ export function AdminQuests() {
     }, [lastCreatedQuestId, quests]);
 
     const handleQuestCreated = () => {
-        fetchQuests();
+        fetchQuests(true);
         toast.success("Quest list updated", {
             description: "The quest inventory has been refreshed.",
         });
@@ -76,8 +81,9 @@ export function AdminQuests() {
             <div className="animate-in fade-in slide-in-from-bottom-4 duration-700">
                 <QuestTable
                     quests={quests}
-                    isLoading={isLoading}
-                    onRefresh={fetchQuests}
+                    isInitialLoading={isInitialLoading}
+                    isRefreshing={isRefreshing}
+                    onRefresh={() => fetchQuests(true)}
                 />
             </div>