Add fallback to average color calculation

This commit is contained in:
jeffvli 2023-01-03 02:28:59 -08:00
parent 7fef7e4689
commit f2e6a418b0

View file

@ -1,10 +1,11 @@
import { useEffect, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { FastAverageColor } from 'fast-average-color'; import { FastAverageColor } from 'fast-average-color';
export const useFastAverageColor = ( export const useFastAverageColor = (
src?: string | null, src?: string | null,
aglorithm?: 'dominant' | 'simple' | 'sqrt', aglorithm?: 'dominant' | 'simple' | 'sqrt',
) => { ) => {
const isMountedRef = useRef<boolean | null>(null);
const [color, setColor] = useState<string | undefined>(undefined); const [color, setColor] = useState<string | undefined>(undefined);
useEffect(() => { useEffect(() => {
@ -27,6 +28,10 @@ export const useFastAverageColor = (
console.log('Error fetching average color', e); console.log('Error fetching average color', e);
return setColor('rgba(0, 0, 0, 0)'); return setColor('rgba(0, 0, 0, 0)');
}); });
} else if (isMountedRef.current) {
return setColor('var(--placeholder-bg)');
} else {
isMountedRef.current = true;
} }
return () => { return () => {