Merge branch 'loading' into 'develop'

Pageload improvements

Closes #976

See merge request soapbox-pub/soapbox-fe!1441

app/soapbox/actions/auth.js

@@ -207,9 +207,12 @@ export function rememberAuthAccount(accountUrl) {
 
 export function loadCredentials(token, accountUrl) {
   return (dispatch, getState) => {
-    return dispatch(rememberAuthAccount(accountUrl)).finally(() => {
-      return dispatch(verifyCredentials(token, accountUrl));
-    });
+    return dispatch(rememberAuthAccount(accountUrl))
+      .then(account => account)
+      .then(() => {
+        dispatch(verifyCredentials(token, accountUrl));
+      })
+      .catch(error => dispatch(verifyCredentials(token, accountUrl)));
   };
 }
 

app/soapbox/components/loading-screen.tsx

@@ -9,7 +9,8 @@ const LoadingScreen: React.FC = () => {
     <div className='fixed h-screen w-screen'>
       <LandingGradient />
 
-      <div className='fixed h-screen w-screen flex items-center justify-center z-10'>
+      <div className='fixed d-screen w-screen flex items-center justify-center z-10'>
+        {/* Bump up spinner vertically to counteract optical illusion. */}
         <Spinner size={40} withText={false} />
       </div>
     </div>

app/styles/application.scss

@@ -102,6 +102,10 @@
   .shadow-inset {
     box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
   }
+
+  .d-screen {
+    height: 100dvh;
+  }
 }
 
 @import 'forms';