mirrors/thatmattlove-hyperglass
1
0
Fork 1
mirror of https://github.com/thatmattlove/hyperglass.git synced 2026-01-17 08:48:05 +00:00
Code Issues Activity

fix issue where incorrect light/dark logo was loaded. closes #240

Browse source
This commit is contained in:
thatmattlove 2024-03-24 14:39:41 -04:00
parent 7eec1727b1
commit 8ab9caa45b
1 changed files with 4 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
hyperglass/ui/components/header/logo.tsx
View file

@ -1,5 +1,5 @@
import { useCallback, useMemo, useState } from 'react';
import { Image, Skeleton } from '@chakra-ui/react';
import { useCallback, useMemo, useState } from 'react';
import { useConfig } from '~/context';
import { useColorValue } from '~/hooks';
@ -12,21 +12,16 @@ function useLogo(): [string, () => void] {
const { web } = useConfig();
const { darkFormat, lightFormat } = web.logo;
const src = useColorValue(`/images/dark${darkFormat}`, `/images/light${lightFormat}`);
const src = useColorValue(`/images/light${darkFormat}`, `/images/dark${lightFormat}`);
// Use the hyperglass logo if the user's logo can't be loaded for whatever reason.
const fallbackSrc = useColorValue(
'https://res.cloudinary.com/hyperglass/image/upload/v1593916013/logo-dark.svg',
'https://res.cloudinary.com/hyperglass/image/upload/v1593916013/logo-light.svg',
);
const [fallback, setSource] = useState<string | null>(null);
// If the user image cannot be loaded, log an error to the console and set the fallback image.
const setFallback = useCallback(() => {
console.warn(`Error loading image from '${src}'`);
setSource(fallbackSrc);
}, [fallbackSrc, src]);
setSource('https://res.cloudinary.com/hyperglass/image/upload/v1593916013/logo-light.svg');
}, [src]);
// Only return the fallback image if it's been set.
return useMemo(() => [fallback ?? src, setFallback], [fallback, setFallback, src]);