import { useMemo } from 'react' ; import { usePalette , PaletteState } from 'react-palette' ; import useHasMounted from '~/hooks/useHasMounted' ; const defaultPaletteData = { data : { } , loading : false , error : Error ( 'Missing image url' ) , } ; const useSafePalette = ( imageUrl ) : PaletteState => { const hasMounted = useHasMounted ( ) ; const internalImageUrl = useMemo < string > ( ( ) => { if ( ! hasMounted ) return '' ; return imageUrl || '' ; } , [ hasMounted , imageUrl ] ) ; const paletteData = usePalette ( internalImageUrl ) ; return paletteData || defaultPaletteData ; } ; export default useSafePalette ;