fix: react-doctor no-inline-exhaustive-style 3→0 (CSS classes for CommandPalette), rendering-usetransition-loading 3→0 (useTransition for fake loading)

src/components/admin/AdminOrdersPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useMemo, useCallback, useEffect } from "react";
+import { useState, useMemo, useCallback, useEffect, useTransition } from "react";
 import Link from "next/link";
 import { useSearchParams } from "next/navigation";
 import {
@@ -209,16 +209,18 @@ export default function AdminOrdersPanel({
   const [page, setPage] = useState(0);
   const [selectedOrders, setSelectedOrders] = useState<Set<string>>(new Set());
   const [bulkMarkingUp, setBulkMarkingUp] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
+  const [isPending, startTransition] = useTransition();
+  const [filterVersion, setFilterVersion] = useState(0);
   const PAGE_SIZE = 20;
 
-  // Simulate loading when orders change
+  // Mark the filter operation as a transition whenever the input
+  // dependencies change, so React can defer the heavy list work and
+  // give us an `isPending` flag instead of a fake useState round-trip.
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setIsLoading(true);
-    const timer = setTimeout(() => setIsLoading(false), 300);
-    return () => clearTimeout(timer);
-  }, [page, activeTab, search, selectedStops.length]);
+    startTransition(() => {
+      setFilterVersion((v) => v + 1);
+    });
+  }, [page, activeTab, search, selectedStops.length, startTransition]);
 
   const filteredOrders = useMemo(() => {
     return orders.filter((order) => {
@@ -377,17 +379,17 @@ export default function AdminOrdersPanel({
       <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
         <KPIStat
           label="Total"
-          value={isLoading ? <Skeleton variant="text" className="w-16 h-8" /> : orders.length}
+          value={isPending ? <Skeleton variant="text" className="w-16 h-8" /> : orders.length}
           tone="default"
         />
         <KPIStat
           label="Pending"
-          value={isLoading ? <Skeleton variant="text" className="w-12 h-8" /> : pendingCount}
+          value={isPending ? <Skeleton variant="text" className="w-12 h-8" /> : pendingCount}
           tone="warning"
         />
         <KPIStat
           label="Picked Up"
-          value={isLoading ? <Skeleton variant="text" className="w-12 h-8" /> : pickedUpCount}
+          value={isPending ? <Skeleton variant="text" className="w-12 h-8" /> : pickedUpCount}
           tone="primary"
         />
       </div>
@@ -583,7 +585,7 @@ export default function AdminOrdersPanel({
       )}
 
       {/* Orders Table */}
-      {isLoading ? (
+      {isPending ? (
         <div
           className="rounded-xl border p-6"
           style={{