Loading component for suspense loaded screens (#1434)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

portal-ui/src/Routes.tsx

@@ -21,6 +21,7 @@ import history from "./history";
 import Console from "./screens/Console/Console";
 import { hot } from "react-hot-loader/root";
 import ProtectedRoute from "./ProtectedRoutes";
+import LoadingComponent from "./common/LoadingComponent";
 
 const Login = React.lazy(() => import("./screens/LoginPage/LoginPage"));
 const LoginCallback = React.lazy(
@@ -35,7 +36,7 @@ const Routes = () => {
           exact
           path="/oauth_callback"
           children={(routerProps) => (
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<LoadingComponent />}>
               <LoginCallback />
             </Suspense>
           )}
@@ -44,7 +45,7 @@ const Routes = () => {
           exact
           path="/login"
           children={(routerProps) => (
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<LoadingComponent />}>
               <Login />
             </Suspense>
           )}

portal-ui/src/common/LoadingComponent.tsx

@@ -0,0 +1,39 @@
+//  This file is part of MinIO Console Server
+//  Copyright (c) 2021 MinIO, Inc.
+//
+//  This program is free software: you can redistribute it and/or modify
+//  it under the terms of the GNU Affero General Public License as published by
+//  the Free Software Foundation, either version 3 of the License, or
+//  (at your option) any later version.
+//
+//  This program is distributed in the hope that it will be useful,
+//  but WITHOUT ANY WARRANTY; without even the implied warranty of
+//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//  GNU Affero General Public License for more details.
+//
+//  You should have received a copy of the GNU Affero General Public License
+//  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+import React from "react";
+import { CircularProgress, Grid } from "@mui/material";
+
+const LoadingComponent = () => {
+  return (
+    <Grid
+      container
+      spacing={0}
+      direction="column"
+      alignItems="center"
+      justifyContent="center"
+      style={{ minHeight: "100vh" }}
+    >
+      <Grid item xs={3} style={{ textAlign: "center" }}>
+        <CircularProgress />
+        <br />
+        Loading...
+      </Grid>
+    </Grid>
+  );
+};
+
+export default LoadingComponent;

portal-ui/src/screens/Console/Buckets/Buckets.tsx

@@ -21,6 +21,7 @@ import { connect } from "react-redux";
 import { AppState } from "../../../store";
 import { setMenuOpen } from "../../../actions";
 import NotFoundPage from "../../NotFoundPage";
+import LoadingComponent from "../../../common/LoadingComponent";
 
 const ListBuckets = React.lazy(() => import("./ListBuckets/ListBuckets"));
 const BucketDetails = React.lazy(() => import("./BucketDetails/BucketDetails"));
@@ -42,7 +43,7 @@ const Buckets = () => {
         <Route
           path="/add-bucket"
           children={(routerProps) => (
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<LoadingComponent />}>
               <AddBucket />
             </Suspense>
           )}
@@ -50,7 +51,7 @@ const Buckets = () => {
         <Route
           path="/buckets/:bucketName/admin/*"
           children={(routerProps) => (
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<LoadingComponent />}>
               <BucketDetails {...routerProps} />
             </Suspense>
           )}
@@ -58,7 +59,7 @@ const Buckets = () => {
         <Route
           path="/buckets/:bucketName/admin"
           children={(routerProps) => (
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<LoadingComponent />}>
               <BucketDetails {...routerProps} />
             </Suspense>
           )}
@@ -66,7 +67,7 @@ const Buckets = () => {
         <Route
           path="/buckets/:bucketName/browse/:subpaths+"
           children={(routerProps) => (
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<LoadingComponent />}>
               <BrowserHandler {...routerProps} />
             </Suspense>
           )}
@@ -74,7 +75,7 @@ const Buckets = () => {
         <Route
           path="/buckets/:bucketName/browse"
           children={(routerProps) => (
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<LoadingComponent />}>
               <BrowserHandler {...routerProps} />
             </Suspense>
           )}
@@ -86,14 +87,14 @@ const Buckets = () => {
         <Route
           path="/"
           children={(routerProps) => (
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<LoadingComponent />}>
               <ListBuckets {...routerProps} />
             </Suspense>
           )}
         />
         <Route
           children={(routerProps) => (
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<LoadingComponent />}>
               <NotFoundPage />
             </Suspense>
           )}

portal-ui/src/screens/Console/Console.tsx

@@ -49,6 +49,7 @@ import {
 } from "../../common/SecureComponent/permissions";
 import { hasPermission } from "../../common/SecureComponent/SecureComponent";
 import { IRouteRule } from "./Menu/types";
+import LoadingComponent from "../../common/LoadingComponent";
 
 const Trace = React.lazy(() => import("./Trace/Trace"));
 const Heal = React.lazy(() => import("./Heal/Heal"));
@@ -566,7 +567,7 @@ const Console = ({
                 }}
               />
             </div>
-            <Suspense fallback={<div>Loading...</div>}>
+            <Suspense fallback={<LoadingComponent />}>
               <ObjectManager />
             </Suspense>
             <Router history={history}>
@@ -577,14 +578,14 @@ const Console = ({
                     exact
                     path={route.path}
                     children={(routerProps) => (
-                      <Suspense fallback={<div>Loading...</div>}>
+                      <Suspense fallback={<LoadingComponent />}>
                         <route.component {...routerProps} {...route.props} />
                       </Suspense>
                     )}
                   />
                 ))}
                 <Route key={"/icons"} exact path={"/icons"}>
-                  <Suspense fallback={<div>Loading...</div>}>
+                  <Suspense fallback={<LoadingComponent />}>
                     <IconsScreen />
                   </Suspense>
                 </Route>