Files
lidify/frontend/components/ui/CachedImage.tsx
2025-12-25 18:58:06 -06:00

25 lines
662 B
TypeScript

"use client";
import { useCachedImage } from "@/hooks/useCachedImage";
import { ImgHTMLAttributes, memo } from "react";
interface CachedImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> {
src: string | null | undefined;
}
/**
* Image component that uses client-side caching to prevent reloading
* Uses blob URLs to persist images across re-renders
*/
const CachedImage = memo(function CachedImage({ src, alt = "", ...props }: CachedImageProps) {
const cachedSrc = useCachedImage(src || null);
if (!cachedSrc) {
return null;
}
return <img src={cachedSrc} alt={alt} {...props} />;
});
export { CachedImage };