Improve load experience (#1078)

ente-io · Apr 24, 2023 · e24c16d · e24c16d
2 parents dacd703 + f0703d2
commit e24c16d
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 20 deletions.
diff --git a/src/components/Login.tsx b/src/components/Login.tsx
@@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useRouter } from 'next/router';
 import { sendOtt } from 'services/userService';
-import { setData, LS_KEYS, getData } from 'utils/storage/localStorage';
+import { setData, LS_KEYS } from 'utils/storage/localStorage';
 import { PAGES } from 'constants/pages';
 import FormPaperTitle from './Form/FormPaper/Title';
 import FormPaperFooter from './Form/FormPaper/Footer';
@@ -17,17 +17,6 @@ interface LoginProps {
 export default function Login(props: LoginProps) {
     const router = useRouter();
 
-    useEffect(() => {
-        const main = async () => {
-            router.prefetch(PAGES.VERIFY);
-            const user = getData(LS_KEYS.USER);
-            if (user?.email) {
-                await router.push(PAGES.VERIFY);
-            }
-        };
-        main();
-    }, []);
-
     const loginUser: SingleInputFormProps['callback'] = async (
         email,
         setFieldError

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -9,7 +9,7 @@ import AppNavbar from 'components/Navbar/app';
 import { t } from 'i18next';
 
 import { useRouter } from 'next/router';
-import VerticallyCentered from 'components/Container';
+import { Overlay } from 'components/Container';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'photoswipe/dist/photoswipe.css';
 import 'styles/global.css';
@@ -456,15 +456,21 @@ export default function App(props) {
                         somethingWentWrong,
                         setDialogBoxAttributesV2,
                     }}>
-                    {loading || !isI18nReady ? (
-                        <VerticallyCentered>
+                    {(loading || !isI18nReady) && (
+                        <Overlay
+                            sx={(theme) => ({
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                zIndex: 2000,
+                                backgroundColor: theme.colors.background.base,
+                            })}>
                             <EnteSpinner>
                                 <span className="sr-only">Loading...</span>
                             </EnteSpinner>
-                        </VerticallyCentered>
-                    ) : (
-                        <Component setLoading={setLoading} {...pageProps} />
+                        </Overlay>
                     )}
+                    <Component setLoading={setLoading} {...pageProps} />
                 </AppContext.Provider>
             </ThemeProvider>
         </CacheProvider>

diff --git a/src/pages/change-password/index.tsx b/src/pages/change-password/index.tsx
@@ -97,7 +97,7 @@ export default function ChangePassword() {
                     callback={onSubmit}
                     buttonText={t('CHANGE_PASSWORD')}
                 />
-                {getData(LS_KEYS.SHOW_BACK_BUTTON)?.value && (
+                {(getData(LS_KEYS.SHOW_BACK_BUTTON)?.value ?? true) && (
                     <FormPaperFooter>
                         <LinkButton onClick={router.back}>
                             {t('GO_BACK')}