fix: concurrent image loading

- actually concurrent (set to 1, probably for debug purposes?)
- make sure there's enough active elements

webui/src/components/imageQueue.ts

@@ -39,38 +39,34 @@ class ImageQueue {
       }
     });
 
+    while (this.active < this.concurrency && this.queue.length) {
+      const nextIdx = this.queue.findIndex((e) => e.check()) || 0;
+      const next = this.queue.splice(nextIdx, 1)[0];
+      dbg(`Getting ${next.id}...`);
+      this.active += 1;
+      next
+        .callback()
+        .then(() => {
+          dbg(`Loaded ${next.id}`);
+        })
+        .catch(() => {
+          dbg(`Failed to load ${next.id}...`);
+        })
+        .finally(() => {
+          this.active -= 1;
+          this.update();
+        });
+    }
+
     dbg(
       "Active: %d, Queue: %O",
       this.active,
       this.queue.map((e) => [e.element, e.id]),
     );
-
-    if (this.active >= this.concurrency) {
-      return;
-    }
-    if (!this.queue.length) {
-      return;
-    }
-    const nextIdx = this.queue.findIndex((e) => e.check()) || 0;
-    const next = this.queue.splice(nextIdx, 1)[0];
-    dbg(`Getting ${next.id}...`);
-    this.active += 1;
-    next
-      .callback()
-      .then(() => {
-        dbg(`Loaded ${next.id}`);
-      })
-      .catch(() => {
-        dbg(`Failed to load ${next.id}...`);
-      })
-      .finally(() => {
-        this.active -= 1;
-        this.update();
-      });
   }
 }
 
-const imageQueue = new ImageQueue(1);
+const imageQueue = new ImageQueue(2);
 
 export function concurrentImage(element: HTMLImageElement, src: string) {
   const bbox = element.getBoundingClientRect();