From 9fcb3ef77d4a2e9fa1f526f02a1402669716bbd1 Mon Sep 17 00:00:00 2001
From: Ahmed Bouhuolia <a.bouhuolia@gmail.com>
Date: Thu, 29 Aug 2024 21:19:36 +0200
Subject: [PATCH] feat: Add fallback spinner to authentication lazy-loaded
 pages

---
 packages/webapp/src/components/LazyLoader.tsx | 22 -------------------
 .../Authentication/Authentication.tsx         | 14 ++++++++++--
 2 files changed, 12 insertions(+), 24 deletions(-)
 delete mode 100644 packages/webapp/src/components/LazyLoader.tsx

diff --git a/packages/webapp/src/components/LazyLoader.tsx b/packages/webapp/src/components/LazyLoader.tsx
deleted file mode 100644
index 99008d973..000000000
--- a/packages/webapp/src/components/LazyLoader.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-// @ts-nocheck
-import * as React from 'react';
-import * as Loadable from 'react-loadable';
-
-const Loader = (config) =>
-  Loadable({
-    loading: (props) => {
-      if (props.error) {
-        /* tslint:disable */
-        console.error(`======= DefaultLoader Error =======`);
-        console.error(props.error);
-        console.error(`======= DefaultLoader Error =======`);
-        /* tslint:enable */
-        return null;
-      }
-      return null;
-    },
-    delay: 250,
-    ...config
-  });
-
-export default Loader;
diff --git a/packages/webapp/src/containers/Authentication/Authentication.tsx b/packages/webapp/src/containers/Authentication/Authentication.tsx
index 408dc78f0..e82856b04 100644
--- a/packages/webapp/src/containers/Authentication/Authentication.tsx
+++ b/packages/webapp/src/containers/Authentication/Authentication.tsx
@@ -2,10 +2,12 @@
 import { Route, Switch, useLocation } from 'react-router-dom';
 import BodyClassName from 'react-body-classname';
 import styled from 'styled-components';
+import { Suspense } from 'react';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
+import { Spinner } from '@blueprintjs/core';
 
 import authenticationRoutes from '@/routes/authentication';
-import { Icon, FormattedMessage as T } from '@/components';
+import { Box, Icon, FormattedMessage as T } from '@/components';
 import { AuthMetaBootProvider } from './AuthMetaBoot';
 
 import '@/style/pages/Authentication/Auth.scss';
@@ -20,7 +22,15 @@ export function Authentication() {
           </AuthLogo>
 
           <AuthMetaBootProvider>
-            <AuthenticationRoutes />
+            <Suspense
+              fallback={
+                <Box style={{ marginTop: '5rem' }}>
+                  <Spinner size={30} />
+                </Box>
+              }
+            >
+              <AuthenticationRoutes />
+            </Suspense>
           </AuthMetaBootProvider>
         </AuthInsider>
       </AuthPage>