feat(ui): add secret loading screen override button

This commit is contained in:
psychedelicious
2023-04-25 22:18:22 +10:00
parent c1c881ded5
commit 65816049ba

View File

@ -14,7 +14,7 @@ import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel'; import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
import Lightbox from 'features/lightbox/components/Lightbox'; import Lightbox from 'features/lightbox/components/Lightbox';
import { useAppDispatch, useAppSelector } from './storeHooks'; import { useAppDispatch, useAppSelector } from './storeHooks';
import { PropsWithChildren, useEffect } from 'react'; import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
import { InvokeTabName } from 'features/ui/store/tabMap'; import { InvokeTabName } from 'features/ui/store/tabMap';
import { shouldTransformUrlsChanged } from 'features/system/store/systemSlice'; import { shouldTransformUrlsChanged } from 'features/system/store/systemSlice';
import { setShouldFetchImages } from 'features/gallery/store/resultsSlice'; import { setShouldFetchImages } from 'features/gallery/store/resultsSlice';
@ -47,6 +47,7 @@ const App = (props: Props) => {
); );
const isApplicationReady = useIsApplicationReady(); const isApplicationReady = useIsApplicationReady();
const [loadingOverridden, setLoadingOverridden] = useState(false);
const { setColorMode } = useColorMode(); const { setColorMode } = useColorMode();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
@ -73,6 +74,10 @@ const App = (props: Props) => {
setColorMode(['light'].includes(currentTheme) ? 'light' : 'dark'); setColorMode(['light'].includes(currentTheme) ? 'light' : 'dark');
}, [setColorMode, currentTheme]); }, [setColorMode, currentTheme]);
const handleOverrideClicked = useCallback(() => {
setLoadingOverridden(true);
}, []);
return ( return (
<Grid w="100vw" h="100vh" position="relative"> <Grid w="100vw" h="100vh" position="relative">
{!disabledFeatures.includes('lightbox') && <Lightbox />} {!disabledFeatures.includes('lightbox') && <Lightbox />}
@ -99,7 +104,7 @@ const App = (props: Props) => {
</ImageUploader> </ImageUploader>
<AnimatePresence> <AnimatePresence>
{!isApplicationReady && ( {!isApplicationReady && !loadingOverridden && (
<motion.div <motion.div
key="loading" key="loading"
initial={{ opacity: 1 }} initial={{ opacity: 1 }}
@ -111,6 +116,15 @@ const App = (props: Props) => {
<Box position="absolute" top={0} left={0} w="100vw" h="100vh"> <Box position="absolute" top={0} left={0} w="100vw" h="100vh">
<Loading /> <Loading />
</Box> </Box>
<Box
onClick={handleOverrideClicked}
position="absolute"
top={0}
right={0}
cursor="pointer"
w="2rem"
h="2rem"
/>
</motion.div> </motion.div>
)} )}
</AnimatePresence> </AnimatePresence>