43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
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;
|
|
}
|