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