diff --git a/src/components/ui/cover-client.tsx b/src/components/ui/cover-client.tsx index 59969c7..4c20aa6 100644 --- a/src/components/ui/cover-client.tsx +++ b/src/components/ui/cover-client.tsx @@ -20,10 +20,22 @@ export const CoverClient = ({ }: CoverClientProps) => { const [imageError, setImageError] = useState(false); const [isLoading, setIsLoading] = useState(true); + const [retryCount, setRetryCount] = useState(0); const timeoutRef = useRef(null); + // Reset état quand l'URL change + useEffect(() => { + setImageError(false); + setIsLoading(true); + setRetryCount(0); + }, [imageUrl]); + // Timeout de sécurité : si l'image ne se charge pas en 30 secondes, on arrête le loading useEffect(() => { + if (timeoutRef.current) { + clearTimeout(timeoutRef.current); + } + timeoutRef.current = setTimeout(() => { if (isLoading) { setIsLoading(false); @@ -36,13 +48,27 @@ export const CoverClient = ({ clearTimeout(timeoutRef.current); } }; - }, [imageUrl, isLoading]); + }, [imageUrl, isLoading, retryCount]); + + // Si en erreur, réessayer automatiquement après 2 secondes + useEffect(() => { + if (imageError) { + const timer = setTimeout(() => { + setImageError(false); + setIsLoading(true); + setRetryCount(prev => prev + 1); + }, 2000); + + return () => clearTimeout(timer); + } + }, [imageError]); const handleLoad = () => { if (timeoutRef.current) { clearTimeout(timeoutRef.current); } setIsLoading(false); + setImageError(false); }; const handleError = () => { @@ -53,6 +79,11 @@ export const CoverClient = ({ setIsLoading(false); }; + // Ajouter un timestamp pour forcer le rechargement en cas de retry + const imageUrlWithRetry = retryCount > 0 + ? `${imageUrl}${imageUrl.includes('?') ? '&' : '?'}retry=${retryCount}` + : imageUrl; + if (imageError) { return (
@@ -66,7 +97,7 @@ export const CoverClient = ({ {/* eslint-disable-next-line @next/next/no-img-element */}