Add fallback to average color calculation
This commit is contained in:
parent
7fef7e4689
commit
f2e6a418b0
1 changed files with 6 additions and 1 deletions
|
@ -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 () => {
|
||||||
|
|
Reference in a new issue