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} />