Improvements to queue

src/components/AdminDashboard.tsx

@@ -29,19 +29,26 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
   // Get current media item
   const currentMedia = mediaQueue.length > 0 ? mediaQueue[0] : null;
 
-  // Preload images
   useEffect(() => {
-    if (mediaQueue.length > 0) {
-      // Preload next images (up to 2)
-      mediaQueue.slice(1, 3).forEach(media => {
-        if (media.preview_url) {
+    // only preload if there are items after the current one
+    mediaQueue.slice(1, 5).forEach(media => {
+      if (!media.preview_url) return;
+
       const img = new Image();
+      img.onload = () => {
+        // successful preload — nothing to do
+      };
+      img.onerror = () => {
+        // this media is broken even before we show it: remove it now
+        setMediaQueue(queue =>
+          queue.filter(item => item.id !== media.id)
+        );
+      };
       img.src = media.preview_url;
-        }
     });
-    }
   }, [mediaQueue]);
 
+
   const fetchMedia = async () => {
     setIsLoading(true);
     try {
@@ -94,10 +101,10 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
   // Fill the queue with initial media items
   const fillMediaQueue = async () => {
     // If queue is already being filled or has items, don't fetch more
-    if (isLoading || mediaQueue.length >= 3) return;
+    if (isLoading || mediaQueue.length >= 5) return;
 
     // Determine how many more items we need
-    const itemsNeeded = 3 - mediaQueue.length;
+    const itemsNeeded = 5 - mediaQueue.length;
 
     // Fetch the items one by one
     for (let i = 0; i < itemsNeeded; i++) {
@@ -110,6 +117,7 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
     fillMediaQueue();
   }, [mediaQueue.length]);
 
+
   const handleAction = async (action: 'approve' | 'reject') => {
     if (!currentMedia) return;
 
@@ -203,13 +211,22 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
                   <img
                     src={currentMedia.preview_url}
                     alt="Media to review"
-      className="max-w-full max-h-96 rounded-lg shadow-md object-contain"
+                    className="max-w-full max-h-96 … object-contain"
                     onError={(e) => {
-        // Fallback to remote URL if preview fails
-        const target = e.target as HTMLImageElement;
-        target.src = currentMedia.remote_url;
+                      const imgEl = e.currentTarget;
+                      if (!imgEl.dataset.fallbackTried) {
+                        imgEl.dataset.fallbackTried = 'true';
+                        imgEl.src = currentMedia.remote_url;
+                      } else {
+                        // both preview AND remote have failed — drop it
+                        setMediaQueue(queue =>
+                          queue.filter(item => item.id !== currentMedia.id)
+                        );
+                      }
                     }}
                   />
+
+
                 </div>
 
                 {/* Media Info */}
@@ -269,3 +286,4 @@ const AdminDashboard = ({ token, onLogout }: AdminDashboardProps) => {
 };
 
 export default AdminDashboard;
+