mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat(ui): add secret loading screen override button
This commit is contained in:
@ -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>
|
||||||
|
Reference in New Issue
Block a user