From 84b04250ac6de48efb7d923bb3768d010384b175 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 12:20:31 -0500
Subject: [PATCH] Add LoadingScreen for fullscreen, theme-specific loading

---
 app/soapbox/components/loading-screen.tsx | 19 +++++++++++++++++++
 app/soapbox/containers/soapbox.tsx        |  8 ++++----
 2 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 app/soapbox/components/loading-screen.tsx

diff --git a/app/soapbox/components/loading-screen.tsx b/app/soapbox/components/loading-screen.tsx
new file mode 100644
index 000000000..84b5bf306
--- /dev/null
+++ b/app/soapbox/components/loading-screen.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import LandingGradient from 'soapbox/components/landing-gradient';
+import { Spinner } from 'soapbox/components/ui';
+
+/** Fullscreen loading indicator. */
+const LoadingScreen: React.FC = () => {
+  return (
+    <div className='fixed h-screen w-screen bg-white dark:bg-slate-900'>
+      <LandingGradient />
+
+      <div className='fixed h-screen w-screen flex items-center justify-center z-10'>
+        <Spinner size={40} withText={false} />
+      </div>
+    </div>
+  );
+};
+
+export default LoadingScreen;
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index d8ffd97d5..0a86ad0fc 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -14,7 +14,7 @@ import { loadSoapboxConfig, getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { fetchVerificationConfig } from 'soapbox/actions/verification';
 import * as BuildConfig from 'soapbox/build_config';
 import Helmet from 'soapbox/components/helmet';
-import { Spinner } from 'soapbox/components/ui';
+import LoadingScreen from 'soapbox/components/loading-screen';
 import AuthLayout from 'soapbox/features/auth_layout';
 import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard';
 import PublicLayout from 'soapbox/features/public_layout';
@@ -126,13 +126,13 @@ const SoapboxMount = () => {
 
   if (showLoading) {
     return (
-      <div className='p-4 h-screen w-screen flex items-center justify-center'>
+      <>
         <Helmet>
           {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
         </Helmet>
 
-        <Spinner size={40} withText={false} />
-      </div>
+        <LoadingScreen />
+      </>
     );
   }