ImageWithFallback: ai code enhance
This commit is contained in:
@@ -1,40 +1,31 @@
|
||||
import { Image, ImageProps, Skeleton } from "antd";
|
||||
import { CSSProperties, useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
CSSProperties,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import styles from "./ImageWithFallback.module.css";
|
||||
|
||||
interface ImageWithFallbackProps extends ImageProps {
|
||||
fallbackSrc: string;
|
||||
borderRadius?: number | string;
|
||||
priority?: boolean;
|
||||
lazy?: boolean;
|
||||
placeholder?: "blur" | "empty";
|
||||
blurDataURL?: string;
|
||||
width?: number | string;
|
||||
height?: number | string;
|
||||
loadingContainerStyle?: CSSProperties;
|
||||
}
|
||||
|
||||
const ImageWithFallback = ({
|
||||
fallbackSrc,
|
||||
src,
|
||||
borderRadius,
|
||||
style,
|
||||
alt,
|
||||
priority = false,
|
||||
/**
|
||||
* Custom hook for handling lazy loading with Intersection Observer
|
||||
* @param options Configuration options for the hook
|
||||
* @returns Object containing ref and isInView state
|
||||
*/
|
||||
const useLazyLoading = ({
|
||||
lazy = true,
|
||||
width,
|
||||
height,
|
||||
loadingContainerStyle,
|
||||
...rest
|
||||
}: ImageWithFallbackProps) => {
|
||||
const [imgSrc, setImgSrc] = useState(src || fallbackSrc);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isInView, setIsInView] = useState(false);
|
||||
const [hasError, setHasError] = useState(false);
|
||||
const imageRef = useRef<HTMLDivElement>(null);
|
||||
priority = false,
|
||||
}: {
|
||||
lazy?: boolean;
|
||||
priority?: boolean;
|
||||
}) => {
|
||||
const [isInView, setIsInView] = useState<boolean>(!lazy || priority);
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
|
||||
// Intersection Observer for lazy loading
|
||||
useEffect(() => {
|
||||
// Skip lazy loading if priority is true or lazy is false
|
||||
if (lazy && !priority) {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
@@ -49,39 +40,160 @@ const ImageWithFallback = ({
|
||||
},
|
||||
);
|
||||
|
||||
if (imageRef.current) {
|
||||
observer.observe(imageRef.current);
|
||||
const currentRef = ref.current;
|
||||
if (currentRef) {
|
||||
observer.observe(currentRef);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
// Cleanup function
|
||||
return () => {
|
||||
if (currentRef) {
|
||||
observer.unobserve(currentRef);
|
||||
}
|
||||
observer.disconnect();
|
||||
};
|
||||
} else {
|
||||
setIsInView(true);
|
||||
}
|
||||
}, [lazy, priority]);
|
||||
|
||||
return { ref, isInView };
|
||||
};
|
||||
|
||||
/**
|
||||
* Props for the ImageWithFallback component
|
||||
* @extends ImageProps from Ant Design's Image component
|
||||
*/
|
||||
interface ImageWithFallbackProps extends ImageProps {
|
||||
/** URL for the fallback image to display when the main image fails to load */
|
||||
fallbackSrc: string;
|
||||
/** Border radius for the image (can be number in pixels or string like '8px' or '50%') */
|
||||
borderRadius?: number | string;
|
||||
/** If true, loads the image immediately without lazy loading */
|
||||
priority?: boolean;
|
||||
/** If true (default), enables lazy loading of the image */
|
||||
lazy?: boolean;
|
||||
/** Type of placeholder to show while loading (not fully implemented) */
|
||||
placeholder?: "blur" | "empty";
|
||||
/** Base64 data URL for blur placeholder (not fully implemented) */
|
||||
blurDataURL?: string;
|
||||
/** Width of the image (number for pixels, string for other units) */
|
||||
width?: number | string;
|
||||
/** Height of the image (number for pixels, string for other units) */
|
||||
height?: number | string;
|
||||
/** Additional styles for the loading container */
|
||||
loadingContainerStyle?: CSSProperties;
|
||||
}
|
||||
|
||||
/**
|
||||
* Enhanced image component with fallback support, lazy loading, and loading states
|
||||
*
|
||||
* Features:
|
||||
* - Displays a fallback image when the main image fails to load
|
||||
* - Supports lazy loading using Intersection Observer API
|
||||
* - Shows loading skeleton while the image is loading
|
||||
* - Handles various styling options including border radius
|
||||
* - Optimized with React.memo to prevent unnecessary re-renders
|
||||
*/
|
||||
const ImageWithFallback = ({
|
||||
fallbackSrc,
|
||||
src,
|
||||
borderRadius,
|
||||
style,
|
||||
alt = "Image", // Default alt text for better accessibility
|
||||
priority = false,
|
||||
lazy = true,
|
||||
width,
|
||||
height,
|
||||
loadingContainerStyle,
|
||||
...rest
|
||||
}: ImageWithFallbackProps) => {
|
||||
const [imgSrc, setImgSrc] = useState<string>(src || fallbackSrc);
|
||||
const [isLoading, setIsLoading] = useState<boolean>(true);
|
||||
const [hasError, setHasError] = useState<boolean>(false);
|
||||
|
||||
// Use the custom lazy loading hook
|
||||
const { ref: imageRef, isInView } = useLazyLoading({ lazy, priority });
|
||||
|
||||
// Default width value for consistency
|
||||
const defaultWidth = 90;
|
||||
|
||||
/**
|
||||
* Handle image load error
|
||||
* Sets the fallback image and updates loading/error states
|
||||
*/
|
||||
const handleError = useCallback(() => {
|
||||
setImgSrc(fallbackSrc);
|
||||
setHasError(true);
|
||||
setIsLoading(false);
|
||||
}, [fallbackSrc]);
|
||||
|
||||
/**
|
||||
* Handle successful image load
|
||||
* Updates loading and error states
|
||||
*/
|
||||
const handleLoad = useCallback(() => {
|
||||
setIsLoading(false);
|
||||
setHasError(false);
|
||||
}, []);
|
||||
|
||||
// Update imgSrc when src prop changes
|
||||
// Update imgSrc when src or fallbackSrc props change
|
||||
useEffect(() => {
|
||||
setImgSrc(src || fallbackSrc);
|
||||
setIsLoading(true);
|
||||
setHasError(false);
|
||||
}, [src, fallbackSrc]);
|
||||
|
||||
// Combine custom style with borderRadius if provided
|
||||
const combinedStyle = {
|
||||
...style,
|
||||
...(borderRadius && { borderRadius }),
|
||||
};
|
||||
// Memoize combined style to prevent unnecessary re-renders
|
||||
const combinedStyle: CSSProperties = useMemo(
|
||||
() => ({
|
||||
...style,
|
||||
...(borderRadius && { borderRadius }),
|
||||
}),
|
||||
[style, borderRadius],
|
||||
);
|
||||
|
||||
/**
|
||||
* Memoized skeleton loader component
|
||||
*/
|
||||
const SkeletonLoader = useMemo(
|
||||
() => (
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
border: "none",
|
||||
height,
|
||||
width: width || defaultWidth,
|
||||
...loadingContainerStyle,
|
||||
}}
|
||||
/>
|
||||
),
|
||||
[height, width, defaultWidth, loadingContainerStyle],
|
||||
);
|
||||
|
||||
// Memoize loading container styles for better performance
|
||||
const loadingContainerStyles: CSSProperties = useMemo(
|
||||
() => ({
|
||||
zIndex: 1,
|
||||
borderRadius: borderRadius || "8px",
|
||||
height,
|
||||
width: width || defaultWidth,
|
||||
textAlign: "center",
|
||||
...loadingContainerStyle,
|
||||
}),
|
||||
[borderRadius, height, width, defaultWidth, loadingContainerStyle],
|
||||
);
|
||||
|
||||
// Memoize image styles for better performance
|
||||
const imageStyles: CSSProperties = useMemo(
|
||||
() => ({
|
||||
opacity: isLoading ? 0 : 1,
|
||||
transition: "opacity 0.3s ease-in-out",
|
||||
objectFit: "cover",
|
||||
...combinedStyle,
|
||||
}),
|
||||
[isLoading, combinedStyle],
|
||||
);
|
||||
|
||||
// Don't render the image until it's in view (for lazy loading)
|
||||
if (lazy && !priority && !isInView) {
|
||||
@@ -92,41 +204,35 @@ const ImageWithFallback = ({
|
||||
style={{
|
||||
...combinedStyle,
|
||||
height,
|
||||
width: width || 90,
|
||||
width: width || defaultWidth,
|
||||
}}
|
||||
aria-label={`Loading ${alt}`}
|
||||
role="progressbar"
|
||||
>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
border: "none",
|
||||
height,
|
||||
width: width || 90,
|
||||
...loadingContainerStyle,
|
||||
}}
|
||||
/>
|
||||
{SkeletonLoader}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={imageRef} style={{ position: "relative", height }}>
|
||||
<div
|
||||
ref={imageRef}
|
||||
style={{ position: "relative", height }}
|
||||
className={hasError ? styles.errorState : undefined}
|
||||
data-testid="image-with-fallback-container"
|
||||
>
|
||||
{/* Loading state */}
|
||||
{isLoading && !hasError && (
|
||||
<div
|
||||
className={`${styles.loadingContainer} ${styles.loadingState}`}
|
||||
style={{
|
||||
zIndex: 1,
|
||||
borderRadius: borderRadius || "8px",
|
||||
height,
|
||||
width: width || 90,
|
||||
textAlign: "center",
|
||||
...loadingContainerStyle,
|
||||
}}
|
||||
style={loadingContainerStyles}
|
||||
aria-hidden="true"
|
||||
>
|
||||
<Skeleton.Image
|
||||
active
|
||||
style={{
|
||||
height,
|
||||
width: width || 90,
|
||||
width: width || defaultWidth,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
@@ -140,20 +246,18 @@ const ImageWithFallback = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Main image */}
|
||||
<Image
|
||||
src={imgSrc}
|
||||
onError={handleError}
|
||||
onLoad={handleLoad}
|
||||
style={{
|
||||
opacity: isLoading ? 0 : 1,
|
||||
transition: "opacity 0.3s ease-in-out",
|
||||
objectFit: "cover",
|
||||
...combinedStyle,
|
||||
}}
|
||||
alt={alt || ""}
|
||||
style={imageStyles}
|
||||
alt={alt}
|
||||
width={width}
|
||||
height={height}
|
||||
preview={false}
|
||||
aria-hidden={isLoading}
|
||||
data-testid="image-with-fallback"
|
||||
{...rest}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user