Enhance moderation queue sorting with visual indicators and logging

Add loading spinners, detailed sort query logging, result preview logging, disable sort controls during loading, and mobile-specific loading text changes. Also, fix type mismatch in QueueSortControls and correct refresh strategy logic.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ef7037e7-a631-48a2-94d1-9a4b52d7c35a
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7cdf4e95-3f41-4180-b8e3-8ef56d032c0e/ef7037e7-a631-48a2-94d1-9a4b52d7c35a/kq6AhNt

src/components/moderation/QueueSortControls.tsx

@@ -1,4 +1,4 @@
-import { ArrowUp, ArrowDown } from 'lucide-react';
+import { ArrowUp, ArrowDown, Loader2 } from 'lucide-react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { Button } from '@/components/ui/button';
@@ -8,6 +8,7 @@ interface QueueSortControlsProps {
   sortConfig: SortConfig;
   onSortChange: (config: SortConfig) => void;
   isMobile: boolean;
+  isLoading?: boolean;
 }
 
 const SORT_FIELD_LABELS: Record<SortField, string> = {
@@ -19,7 +20,8 @@ const SORT_FIELD_LABELS: Record<SortField, string> = {
 export const QueueSortControls = ({
   sortConfig,
   onSortChange,
-  isMobile
+  isMobile,
+  isLoading = false
 }: QueueSortControlsProps) => {
   const handleFieldChange = (value: string) => {
     const validFields: SortField[] = ['created_at', 'submission_type', 'status'];
@@ -48,14 +50,16 @@ export const QueueSortControls = ({
   return (
     <div className={`flex gap-2 ${isMobile ? 'flex-col' : 'items-end'}`}>
       <div className={`space-y-2 ${isMobile ? 'w-full' : 'min-w-[160px]'}`}>
-        <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'}`}>
+        <Label className={`font-medium ${isMobile ? 'text-xs' : 'text-sm'} flex items-center gap-2`}>
           Sort By
+          {isLoading && <Loader2 className="w-3 h-3 animate-spin text-primary" />}
         </Label>
         <Select 
           value={sortConfig.field} 
           onValueChange={handleFieldChange}
+          disabled={isLoading}
         >
-          <SelectTrigger className={isMobile ? "h-10" : ""}>
+          <SelectTrigger className={isMobile ? "h-10" : ""} disabled={isLoading}>
             <SelectValue>
               {SORT_FIELD_LABELS[sortConfig.field]}
             </SelectValue>
@@ -75,12 +79,19 @@ export const QueueSortControls = ({
           variant="outline"
           size={isMobile ? "default" : "icon"}
           onClick={handleDirectionToggle}
+          disabled={isLoading}
           className={`flex items-center gap-2 ${isMobile ? 'w-full h-10' : 'h-10 w-10'}`}
           title={sortConfig.direction === 'asc' ? 'Ascending' : 'Descending'}
         >
-          <DirectionIcon className="w-4 h-4" />
+          {isLoading ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : (
+            <DirectionIcon className="w-4 h-4" />
+          )}
           {isMobile && (
-            <span className="capitalize">{sortConfig.direction}ending</span>
+            <span className="capitalize">
+              {isLoading ? 'Loading...' : `${sortConfig.direction}ending`}
+            </span>
           )}
         </Button>
       </div>