Initial release v1.0.0

frontend/hooks/useCachedImage.ts

@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+import { getCachedImageUrl } from "@/utils/imageCache";
+
+/**
+ * Hook that returns a cached blob URL for an image
+ * Prevents image reloading on re-renders by using client-side caching
+ */
+export function useCachedImage(url: string | null): string | null {
+    const [cachedUrl, setCachedUrl] = useState<string | null>(url);
+
+    useEffect(() => {
+        if (!url) {
+            setCachedUrl(null);
+            return;
+        }
+
+        let isMounted = true;
+
+        getCachedImageUrl(url)
+            .then((blobUrl) => {
+                if (isMounted) {
+                    setCachedUrl(blobUrl);
+                }
+            })
+            .catch((error) => {
+                console.error(
+                    "Failed to get cached image:",
+                    url,
+                    error.message
+                );
+                if (isMounted) {
+                    setCachedUrl(url); // Fallback to original URL
+                }
+            });
+
+        return () => {
+            isMounted = false;
+        };
+    }, [url]);
+
+    return cachedUrl;
+}