feat: Refactor ListView sorting logic for clarity and update QueryListItem to conditionally render disabled chip for pending queries

Author: dborysov

src/components/layout/ListView.tsx

@@ -38,15 +38,16 @@ export function ListView({ currentView, searchTerm, queries, mutations, selected
   });
 
   // Sort queries so inactive ones go to the end
-  const sortedData = currentView === "queries"
-    ? [...filteredData].sort((a, b) => {
-        const aQuery = a as QueryData;
-        const bQuery = b as QueryData;
-        if (!aQuery.isActive && bQuery.isActive) return 1;
-        if (aQuery.isActive && !bQuery.isActive) return -1;
-        return 0;
-      })
-    : filteredData;
+  const sortedData =
+    currentView === "queries"
+      ? [...filteredData].sort((a, b) => {
+          const aQuery = a as QueryData;
+          const bQuery = b as QueryData;
+          if (!aQuery.isActive && bQuery.isActive) return 1;
+          if (aQuery.isActive && !bQuery.isActive) return -1;
+          return 0;
+        })
+      : filteredData;
 
   // Update keyboard navigation item count when sorted data changes
   useEffect(() => {
@@ -74,7 +75,7 @@ export function ListView({ currentView, searchTerm, queries, mutations, selected
                 const originalIndex = queries.indexOf(query);
                 return (
                   <QueryListItem
-                    key={`${query.queryKey}-${index}`}
+                    key={query.queryHash}
                     query={query}
                     index={originalIndex}
                     isSelected={selectedQueryIndex === originalIndex}

src/components/query/QueryListItem.tsx

@@ -80,7 +80,7 @@ export function QueryListItem({ query, index, isSelected, onSelect, staggerIndex
         <div className="flex-1 font-mono text-xs text-gray-700 dark:text-gray-300 break-all">{formatQueryKeyShort(query.queryKey)}</div>
 
         {/* Disabled chip for pending queries */}
-        {query.state.status === "pending" && (
+        {query.state.status === "pending" && !query.state.isFetching && (
           <Chip variant="disabled" size="sm">
             Disabled
           </Chip>