improve react suspense fallback

Author: gabrieljablonski

package.json

@@ -47,6 +47,7 @@
     "react-icons": "^4.3.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
+    "react-spinners": "^0.13.3",
     "react-toastify": "^9.0.1",
     "short-uuid": "^4.2.0",
     "styled-components": "^5.3.5",

src/App.tsx

@@ -1,26 +1,44 @@
 import React from 'react';
 import { Slide } from 'react-toastify';
+import { BeatLoader } from 'react-spinners';
 import { ModalDialog, ToastContainer } from './components';
 
 import AppProvider from './providers';
 import AppRoutes from './routes';
-import GlobalStyle from './styles/global';
+import GlobalStyle, { ColorPallete } from './styles/global';
 
 const App: React.FC = () => {
   return (
     <AppProvider>
-      <AppRoutes />
-      <ToastContainer
-        autoClose={5000}
-        transition={Slide}
-        newestOnTop
-        closeOnClick
-        draggable={false}
-        pauseOnFocusLoss={false}
-        pauseOnHover
-        theme="dark"
-      />
-      <ModalDialog />
+      <React.Suspense
+        fallback={
+          <div
+            style={{
+              display: 'flex',
+              height: '100%',
+              width: '100%',
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: ColorPallete.NEUTRAL_1,
+            }}
+          >
+            <BeatLoader color={ColorPallete.NEUTRAL_3} />
+          </div>
+        }
+      >
+        <AppRoutes />
+        <ToastContainer
+          autoClose={5000}
+          transition={Slide}
+          newestOnTop
+          closeOnClick
+          draggable={false}
+          pauseOnFocusLoss={false}
+          pauseOnHover
+          theme="dark"
+        />
+        <ModalDialog />
+      </React.Suspense>
       <GlobalStyle />
     </AppProvider>
   );

src/components/Input/styles.ts

@@ -51,6 +51,7 @@ export const StyledDivider = styled(Divider)<DividerProps>`
   margin: 8px;
   border-right-width: 1px;
 `;
+
 export const StyledPaper = styled(Paper)<PaperStylesProps>`
   box-shadow: unset;
   padding: 2px 4px;

src/index.tsx

@@ -10,9 +10,7 @@ if (container) {
   const root = createRoot(container);
   root.render(
     <React.StrictMode>
-      <React.Suspense fallback={<div />}>
-        <App />
-      </React.Suspense>
+      <App />
     </React.StrictMode>,
   );
 }

src/styles/global.ts

@@ -49,12 +49,10 @@ export default createGlobalStyle`
     outline: 0;
     font-family: 'Nunito', Arial, Helvetica, sans-serif;
     font-size: 16px;
-    /* color: var(--color-neutral-3); */
   }
 
   body {
-    background: var(--color-neutral-1);
-    /* color: #fff; */
+    background-color: var(--color-neutral-1);
     -webkit-font-smoothing: antialiased;
   }
 

yarn.lock

@@ -8574,6 +8574,11 @@ react-scripts@^5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-spinners@^0.13.3:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/react-spinners/-/react-spinners-0.13.3.tgz#9d00d10fb2a0869b21efdc13fb0fddbcecd05731"
+  integrity sha512-FHQMH6dAl1Vw4Lxv0H7hbGsjBs0aKNVwjGrDJLuD9R/C3h9+IuBhKJOJyCcegxMaLiBSBV96Tp+XV3OwPK8Vtw==
+
 react-toastify@^9.0.1:
   version "9.0.1"
   resolved "https://registry.yarnpkg.com/react-toastify/-/react-toastify-9.0.1.tgz#2f3abd26a75efd55a82cb9c0a897c865218ea420"