feat: Implement optimistic UI updates

src/components/moderation/QueueItem.tsx

@@ -425,6 +425,16 @@ export const QueueItem = memo(({
                     <ListTree className={isMobile ? "w-5 h-5 mr-2" : "w-4 h-4 mr-2"} />
                     Review Items
                   </Button>
+                  
+                  {/* Debug info in dev mode */}
+                  {import.meta.env.DEV && isAdmin && (
+                    <div className="text-xs text-muted-foreground mb-2 font-mono">
+                      🔍 isLockedByMe={String(isLockedByMe)} | 
+                      assigned_to={item.assigned_to?.slice(0,8) || 'null'} | 
+                      currentLock={currentLockSubmissionId?.slice(0,8) || 'null'}
+                    </div>
+                  )}
+                  
                   {isAdmin && isLockedByMe && (
                     <Tooltip>
                       <TooltipTrigger asChild>

src/hooks/moderation/useModerationQueueManager.ts

@@ -115,6 +115,8 @@ export function useModerationQueueManager(config: ModerationQueueManagerConfig):
     onLockStateChange: () => {
       logger.log('🔄 Lock state changed, invalidating queue cache');
       queueQuery.invalidate();
+      // Force immediate re-render by triggering a loading cycle
+      setLoadingState(prev => prev === "loading" ? "ready" : prev);
     }
   });
   const entityCache = useEntityCache();

src/hooks/useModerationQueue.ts

@@ -452,7 +452,7 @@ export const useModerationQueue = (config?: UseModerationQueueConfig) => {
   }, [currentLock, releaseLock]);
 
   return {
-    currentLock,
+    currentLock,  // Exposed for reactive UI updates
     queueStats,
     isLoading,
     claimNext,