Fix queue refresh on lock state change

src/components/moderation/QueueItem.tsx

@@ -81,6 +81,7 @@ export const QueueItem = memo(({
   onInteractionBlur
 }: QueueItemProps) => {
   const [validationResult, setValidationResult] = useState<ValidationResult | null>(null);
+  const [isClaiming, setIsClaiming] = useState(false);
   
   // Fetch relational photo data for photo submissions
   const { photos: photoItems, loading: photosLoading } = usePhotoSubmissionItems(
@@ -96,6 +97,12 @@ export const QueueItem = memo(({
     setValidationResult(result);
   }, []);
   
+  const handleClaim = useCallback(async () => {
+    setIsClaiming(true);
+    await onClaimSubmission(item.id);
+    setIsClaiming(false);
+  }, [onClaimSubmission, item.id]);
+  
   return (
     <Card 
       key={item.id} 
@@ -298,7 +305,14 @@ export const QueueItem = memo(({
                 <div className="text-sm text-muted-foreground">Loading photos...</div>
               ) : photoItems.length > 0 ? (
                 <div className="space-y-2">
-                  <div className="text-sm font-medium">Photos ({photoItems.length}):</div>
+                  <div className="text-sm font-medium flex items-center justify-between">
+                    <span>Photos ({photoItems.length}):</span>
+                    {import.meta.env.DEV && photoItems[0] && (
+                      <span className="text-xs text-muted-foreground">
+                        URL: {photoItems[0].cloudflare_image_url?.slice(0, 30)}...
+                      </span>
+                    )}
+                  </div>
                   <PhotoGrid
                     photos={photoItems.map(photo => ({
                       id: photo.id,
@@ -312,9 +326,13 @@ export const QueueItem = memo(({
                   />
                 </div>
               ) : (
-                <div className="text-sm text-muted-foreground">
-                  No photos found in submission
-                </div>
+                <Alert variant="destructive" className="mt-4">
+                  <AlertTriangle className="h-4 w-4" />
+                  <AlertTitle>No Photos Found</AlertTitle>
+                  <AlertDescription>
+                    This photo submission has no photos attached. This may be a data integrity issue.
+                  </AlertDescription>
+                </Alert>
               )}
               
               {/* Context Information */}
@@ -356,13 +374,22 @@ export const QueueItem = memo(({
                     <div className="flex items-center justify-between mt-2">
                       <span className="text-sm">Claim this submission to lock it for 15 minutes while you review</span>
                       <Button
-                        onClick={() => onClaimSubmission(item.id)}
-                        disabled={queueIsLoading}
+                        onClick={handleClaim}
+                        disabled={queueIsLoading || isClaiming}
                         size="sm"
                         className="ml-4"
                       >
-                        <Lock className="w-4 h-4 mr-2" />
-                        Claim Submission
+                        {isClaiming ? (
+                          <>
+                            <RefreshCw className="w-4 h-4 mr-2 animate-spin" />
+                            Claiming...
+                          </>
+                        ) : (
+                          <>
+                            <Lock className="w-4 h-4 mr-2" />
+                            Claim Submission
+                          </>
+                        )}
                       </Button>
                     </div>
                   </AlertDescription>