updated image loading

src/utils/utils.ts

@@ -87,3 +87,60 @@ export function drawRects(
     ctx.stroke();
   });
 }
+
+// setSelectedRef(data?.ref);
+
+//setItems(data);
+
+// const selected = useMemo(
+//   () =>
+//     selectedRef == null
+//       ? null
+//       : items.find((x) => x?.ref === selectedRef) ?? null,
+//   [items, selectedRef]
+// );
+// const effectiveSelected = selected ?? mostRecent ?? null;
+
+// useEffect(() => {
+//   let delay = pollMs;
+//   let dead = false;
+//   const controller = new AbortController();
+
+//   async function tick() {
+//     try {
+//       // Pause when tab hidden to save CPU/network
+//       if (document.hidden) {
+//         setTimeout(tick, Math.max(delay, 2000));
+//         return;
+//       }
+
+//       if (obj && typeof obj.ref === "number" && obj.ref > -1) {
+//         setItems((prev) => {
+//           const next = [obj, ...prev].slice(0, limit);
+//           // maintain selection if still present; otherwise select newest if allowed
+//           const stillExists =
+//             selectedRef != null && next.some((x) => x?.ref === selectedRef);
+//           if (autoSelectLatest && !stillExists) {
+//             setSelectedRef(obj.ref);
+//           }
+//           return next;
+//         });
+//         setMostRecent(obj);
+//         mostRecentRef.current = obj.ref;
+//         delay = pollMs; // reset backoff on success
+//       }
+//     } catch {
+//       // exponential backoff (max 10s)
+//       delay = Math.min(delay * 2, 10000);
+//     } finally {
+//       if (!dead) setTimeout(tick, delay);
+//     }
+//   }
+
+//   const t = setTimeout(tick, pollMs);
+//   return () => {
+//     dead = true;
+//     controller.abort();
+//     clearTimeout(t);
+//   };
+// }, [baseUrl, limit, pollMs, autoSelectLatest, selectedRef]);