From 65816049ba2390e7ab2f0a92ad6994d0b353b85a Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Tue, 25 Apr 2023 22:18:22 +1000
Subject: [PATCH] feat(ui): add secret loading screen override button

---
 invokeai/frontend/web/src/app/App.tsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/invokeai/frontend/web/src/app/App.tsx b/invokeai/frontend/web/src/app/App.tsx
index 4bbf8f4429..f458b30458 100644
--- a/invokeai/frontend/web/src/app/App.tsx
+++ b/invokeai/frontend/web/src/app/App.tsx
@@ -14,7 +14,7 @@ import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel';
 import Lightbox from 'features/lightbox/components/Lightbox';
 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 { shouldTransformUrlsChanged } from 'features/system/store/systemSlice';
 import { setShouldFetchImages } from 'features/gallery/store/resultsSlice';
@@ -47,6 +47,7 @@ const App = (props: Props) => {
   );
 
   const isApplicationReady = useIsApplicationReady();
+  const [loadingOverridden, setLoadingOverridden] = useState(false);
 
   const { setColorMode } = useColorMode();
   const dispatch = useAppDispatch();
@@ -73,6 +74,10 @@ const App = (props: Props) => {
     setColorMode(['light'].includes(currentTheme) ? 'light' : 'dark');
   }, [setColorMode, currentTheme]);
 
+  const handleOverrideClicked = useCallback(() => {
+    setLoadingOverridden(true);
+  }, []);
+
   return (
     <Grid w="100vw" h="100vh" position="relative">
       {!disabledFeatures.includes('lightbox') && <Lightbox />}
@@ -99,7 +104,7 @@ const App = (props: Props) => {
       </ImageUploader>
 
       <AnimatePresence>
-        {!isApplicationReady && (
+        {!isApplicationReady && !loadingOverridden && (
           <motion.div
             key="loading"
             initial={{ opacity: 1 }}
@@ -111,6 +116,15 @@ const App = (props: Props) => {
             <Box position="absolute" top={0} left={0} w="100vw" h="100vh">
               <Loading />
             </Box>
+            <Box
+              onClick={handleOverrideClicked}
+              position="absolute"
+              top={0}
+              right={0}
+              cursor="pointer"
+              w="2rem"
+              h="2rem"
+            />
           </motion.div>
         )}
       </AnimatePresence>