From 0bbd4f02821034e4674849e177219ef9366c68c8 Mon Sep 17 00:00:00 2001
From: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
Date: Fri, 19 Nov 2021 16:12:31 -0800
Subject: [PATCH] Lazy Load Login Screens and Menu Icons (#1244)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
---
 portal-ui/src/Routes.tsx                      | 30 +++++-
 .../src/screens/Console/Buckets/Buckets.tsx   | 72 +++++++++++---
 .../Console/Buckets/ListBuckets/AddBucket.tsx |  1 -
 portal-ui/src/screens/Console/Menu/Menu.tsx   | 96 +++++++++++--------
 .../src/screens/LoginPage/LoginCallback.tsx   |  7 +-
 5 files changed, 142 insertions(+), 64 deletions(-)

diff --git a/portal-ui/src/Routes.tsx b/portal-ui/src/Routes.tsx
index 2db10af54..e5a493100 100644
--- a/portal-ui/src/Routes.tsx
+++ b/portal-ui/src/Routes.tsx
@@ -14,21 +14,41 @@
 // 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 React, { Suspense } from "react";
 import { Route, Router, Switch } from "react-router-dom";
 import history from "./history";
-import Login from "./screens/LoginPage/LoginPage";
+
 import Console from "./screens/Console/Console";
-import LoginCallback from "./screens/LoginPage/LoginCallback";
 import { hot } from "react-hot-loader/root";
 import ProtectedRoute from "./ProtectedRoutes";
 
+const Login = React.lazy(() => import("./screens/LoginPage/LoginPage"));
+const LoginCallback = React.lazy(
+  () => import("./screens/LoginPage/LoginCallback")
+);
+
 const Routes = () => {
   return (
     <Router history={history}>
       <Switch>
-        <Route exact path="/oauth_callback" component={LoginCallback} />
-        <Route exact path="/login" component={Login} />
+        <Route
+          exact
+          path="/oauth_callback"
+          children={(routerProps) => (
+            <Suspense fallback={<div>Loading...</div>}>
+              <LoginCallback />
+            </Suspense>
+          )}
+        />
+        <Route
+          exact
+          path="/login"
+          children={(routerProps) => (
+            <Suspense fallback={<div>Loading...</div>}>
+              <Login />
+            </Suspense>
+          )}
+        />
         <ProtectedRoute Component={Console} />
       </Switch>
     </Router>
diff --git a/portal-ui/src/screens/Console/Buckets/Buckets.tsx b/portal-ui/src/screens/Console/Buckets/Buckets.tsx
index 333a70ce4..a41f9393b 100644
--- a/portal-ui/src/screens/Console/Buckets/Buckets.tsx
+++ b/portal-ui/src/screens/Console/Buckets/Buckets.tsx
@@ -14,17 +14,20 @@
 // 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 React, { Suspense } from "react";
 import history from "../../../history";
 import { Redirect, Route, Router, Switch, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 import { AppState } from "../../../store";
 import { setMenuOpen } from "../../../actions";
 import NotFoundPage from "../../NotFoundPage";
-import ListBuckets from "./ListBuckets/ListBuckets";
-import BucketDetails from "./BucketDetails/BucketDetails";
-import BrowserHandler from "./BucketDetails/BrowserHandler";
-import AddBucket from "./ListBuckets/AddBucket";
+
+const ListBuckets = React.lazy(() => import("./ListBuckets/ListBuckets"));
+const BucketDetails = React.lazy(() => import("./BucketDetails/BucketDetails"));
+const BrowserHandler = React.lazy(
+  () => import("./BucketDetails/BrowserHandler")
+);
+const AddBucket = React.lazy(() => import("./ListBuckets/AddBucket"));
 
 const mapState = (state: AppState) => ({
   open: state.system.sidebarOpen,
@@ -36,20 +39,65 @@ const Buckets = () => {
   return (
     <Router history={history}>
       <Switch>
-        <Route path="/add-bucket" component={AddBucket} />
-        <Route path="/buckets/:bucketName/admin/*" component={BucketDetails} />
-        <Route path="/buckets/:bucketName/admin" component={BucketDetails} />
+        <Route
+          path="/add-bucket"
+          children={(routerProps) => (
+            <Suspense fallback={<div>Loading...</div>}>
+              <AddBucket />
+            </Suspense>
+          )}
+        />
+        <Route
+          path="/buckets/:bucketName/admin/*"
+          children={(routerProps) => (
+            <Suspense fallback={<div>Loading...</div>}>
+              <BucketDetails {...routerProps} />
+            </Suspense>
+          )}
+        />
+        <Route
+          path="/buckets/:bucketName/admin"
+          children={(routerProps) => (
+            <Suspense fallback={<div>Loading...</div>}>
+              <BucketDetails {...routerProps} />
+            </Suspense>
+          )}
+        />
         <Route
           path="/buckets/:bucketName/browse/:subpaths+"
-          component={BrowserHandler}
+          children={(routerProps) => (
+            <Suspense fallback={<div>Loading...</div>}>
+              <BrowserHandler {...routerProps} />
+            </Suspense>
+          )}
+        />
+        <Route
+          path="/buckets/:bucketName/browse"
+          children={(routerProps) => (
+            <Suspense fallback={<div>Loading...</div>}>
+              <BrowserHandler {...routerProps} />
+            </Suspense>
+          )}
         />
-        <Route path="/buckets/:bucketName/browse" component={BrowserHandler} />
         <Route
           path="/buckets/:bucketName"
           component={() => <Redirect to={`/buckets`} />}
         />
-        <Route path="/" component={ListBuckets} />
-        <Route component={NotFoundPage} />
+        <Route
+          path="/"
+          children={(routerProps) => (
+            <Suspense fallback={<div>Loading...</div>}>
+              <ListBuckets {...routerProps} />
+            </Suspense>
+          )}
+        />
+        <Route
+          children={(routerProps) => (
+            <Suspense fallback={<div>Loading...</div>}>
+              <NotFoundPage />
+            </Suspense>
+          )}
+        />
       </Switch>
     </Router>
   );
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
index 7d0e26ec2..cd94c465a 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/AddBucket.tsx
@@ -99,7 +99,6 @@ const styles = (theme: Theme) =>
 
 interface IAddBucketProps {
   classes: any;
-  open: boolean;
   addBucketName: typeof addBucketName;
   addBucketVersioned: typeof addBucketVersioning;
   enableObjectLocking: typeof addBucketEnableObjectLocking;
diff --git a/portal-ui/src/screens/Console/Menu/Menu.tsx b/portal-ui/src/screens/Console/Menu/Menu.tsx
index a15e413f0..1e18d7f3d 100644
--- a/portal-ui/src/screens/Console/Menu/Menu.tsx
+++ b/portal-ui/src/screens/Console/Menu/Menu.tsx
@@ -14,7 +14,7 @@
 // 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 React, { Suspense } from "react";
 import { connect } from "react-redux";
 import { NavLink } from "react-router-dom";
 import { Divider, Drawer, IconButton, Tooltip } from "@mui/material";
@@ -31,36 +31,47 @@ import { AppState } from "../../../store";
 import { setMenuOpen, userLoggedIn } from "../../../actions";
 import { menuGroups } from "./utils";
 import { IMenuItem } from "./types";
-import {
-  BucketsIcon,
-  DashboardIcon,
-  DiagnosticsIcon,
-  GroupsIcon,
-  IAMPoliciesIcon,
-  LambdaIcon,
-  TiersIcon,
-  ToolsIcon,
-  UsersIcon,
-  VersionIcon,
-} from "../../../icons";
+
 import { ErrorResponseHandler } from "../../../common/types";
 import { clearSession } from "../../../common/utils";
-import LicenseIcon from "../../../icons/LicenseIcon";
-import LogoutIcon from "../../../icons/LogoutIcon";
-import HealIcon from "../../../icons/HealIcon";
+
 import OperatorLogo from "../../../icons/OperatorLogo";
 import ConsoleLogo from "../../../icons/ConsoleLogo";
 import history from "../../../history";
 import api from "../../../common/api";
-import AccountIcon from "../../../icons/AccountIcon";
-import DocumentationIcon from "../../../icons/DocumentationIcon";
-import SettingsIcon from "../../../icons/SettingsIcon";
-import StorageIcon from "../../../icons/StorageIcon";
-import TenantsOutlinedIcon from "../../../icons/TenantsOutlineIcon";
+
 import MenuIcon from "@mui/icons-material/Menu";
+import { LogoutIcon } from "../../../icons";
 
 const drawerWidth = 245;
 
+const BucketsIcon = React.lazy(() => import("../../../icons/BucketsIcon"));
+const DashboardIcon = React.lazy(() => import("../../../icons/DashboardIcon"));
+const DiagnosticsIcon = React.lazy(
+  () => import("../../../icons/DiagnosticsIcon")
+);
+const GroupsIcon = React.lazy(() => import("../../../icons/GroupsIcon"));
+const IAMPoliciesIcon = React.lazy(
+  () => import("../../../icons/IAMPoliciesIcon")
+);
+const LambdaIcon = React.lazy(() => import("../../../icons/LambdaIcon"));
+const TiersIcon = React.lazy(() => import("../../../icons/TiersIcon"));
+const ToolsIcon = React.lazy(() => import("../../../icons/ToolsIcon"));
+const UsersIcon = React.lazy(() => import("../../../icons/UsersIcon"));
+const VersionIcon = React.lazy(() => import("../../../icons/VersionIcon"));
+const LicenseIcon = React.lazy(() => import("../../../icons/LicenseIcon"));
+
+const HealIcon = React.lazy(() => import("../../../icons/HealIcon"));
+const AccountIcon = React.lazy(() => import("../../../icons/AccountIcon"));
+const DocumentationIcon = React.lazy(
+  () => import("../../../icons/DocumentationIcon")
+);
+const SettingsIcon = React.lazy(() => import("../../../icons/SettingsIcon"));
+const StorageIcon = React.lazy(() => import("../../../icons/StorageIcon"));
+const TenantsOutlinedIcon = React.lazy(
+  () => import("../../../icons/TenantsOutlineIcon")
+);
+
 const styles = (theme: Theme) =>
   createStyles({
     logo: {
@@ -316,7 +327,7 @@ const Menu = ({
       component: NavLink,
       to: "/dashboard",
       name: "Dashboard",
-      icon: <DashboardIcon />,
+      icon: DashboardIcon,
     },
     {
       group: "common",
@@ -324,7 +335,7 @@ const Menu = ({
       component: NavLink,
       to: "/buckets",
       name: "Buckets",
-      icon: <BucketsIcon />,
+      icon: BucketsIcon,
     },
 
     {
@@ -333,7 +344,7 @@ const Menu = ({
       component: NavLink,
       to: "/users",
       name: "Users",
-      icon: <UsersIcon />,
+      icon: UsersIcon,
     },
     {
       group: "common",
@@ -341,7 +352,7 @@ const Menu = ({
       component: NavLink,
       to: "/groups",
       name: "Groups",
-      icon: <GroupsIcon />,
+      icon: GroupsIcon,
     },
     {
       group: "common",
@@ -349,7 +360,7 @@ const Menu = ({
       component: NavLink,
       to: "/account",
       name: "Service Accounts",
-      icon: <AccountIcon />,
+      icon: AccountIcon,
     },
     {
       group: "common",
@@ -357,7 +368,7 @@ const Menu = ({
       component: NavLink,
       to: "/policies",
       name: "IAM Policies",
-      icon: <IAMPoliciesIcon />,
+      icon: IAMPoliciesIcon,
     },
     {
       group: "common",
@@ -365,7 +376,7 @@ const Menu = ({
       component: NavLink,
       to: "/settings",
       name: "Settings",
-      icon: <SettingsIcon />,
+      icon: SettingsIcon,
     },
     {
       group: "common",
@@ -373,7 +384,7 @@ const Menu = ({
       component: NavLink,
       to: "/notification-endpoints",
       name: "Notification Endpoints",
-      icon: <LambdaIcon />,
+      icon: LambdaIcon,
     },
     {
       group: "common",
@@ -381,7 +392,7 @@ const Menu = ({
       component: NavLink,
       to: "/tiers",
       name: "Tiers",
-      icon: <TiersIcon />,
+      icon: TiersIcon,
     },
     {
       group: "common",
@@ -389,7 +400,7 @@ const Menu = ({
       component: NavLink,
       to: "/tools",
       name: "Tools",
-      icon: <ToolsIcon />,
+      icon: ToolsIcon,
     },
     {
       group: "Tools",
@@ -397,7 +408,7 @@ const Menu = ({
       component: NavLink,
       to: "/heal",
       name: "Heal",
-      icon: <HealIcon />,
+      icon: HealIcon,
       fsHidden: distributedSetup,
     },
     {
@@ -406,7 +417,7 @@ const Menu = ({
       component: NavLink,
       to: "/health-info",
       name: "Diagnostic",
-      icon: <DiagnosticsIcon />,
+      icon: DiagnosticsIcon,
     },
     {
       group: "Operator",
@@ -414,7 +425,7 @@ const Menu = ({
       component: NavLink,
       to: "/tenants",
       name: "Tenants",
-      icon: <TenantsOutlinedIcon />,
+      icon: TenantsOutlinedIcon,
     },
     {
       group: "Operator",
@@ -422,7 +433,7 @@ const Menu = ({
       component: NavLink,
       to: "/storage",
       name: "Storage",
-      icon: <StorageIcon />,
+      icon: StorageIcon,
     },
   ];
 
@@ -437,7 +448,7 @@ const Menu = ({
     component: NavLink,
     to: "/documentation",
     name: "Documentation",
-    icon: <DocumentationIcon />,
+    icon: DocumentationIcon,
     forceDisplay: true,
   };
 
@@ -477,7 +488,7 @@ const Menu = ({
         component: NavLink,
         to: "/license",
         name: "License",
-        icon: <LicenseIcon />,
+        icon: LicenseIcon,
       },
       {
         ...documentation,
@@ -532,7 +543,9 @@ const Menu = ({
           )}
           {!sidebarOpen && (
             <div className={classes.logoIconClosed}>
-              <VersionIcon />
+              <Suspense fallback={<div>Loading...</div>}>
+                <VersionIcon />
+              </Suspense>
             </div>
           )}
           <IconButton
@@ -582,7 +595,11 @@ const Menu = ({
                           {page.icon && (
                             <Tooltip title={page.name}>
                               <div>
-                                <ListItemIcon>{page.icon}</ListItemIcon>
+                                <ListItemIcon>
+                                  <Suspense fallback={<div>Loading...</div>}>
+                                    <page.icon />
+                                  </Suspense>
+                                </ListItemIcon>
                               </div>
                             </Tooltip>
                           )}
@@ -620,7 +637,6 @@ const Menu = ({
     </React.Fragment>
   );
 };
-
 const mapState = (state: AppState) => ({
   sidebarOpen: state.system.sidebarOpen,
   operatorMode: state.system.operatorMode,
diff --git a/portal-ui/src/screens/LoginPage/LoginCallback.tsx b/portal-ui/src/screens/LoginPage/LoginCallback.tsx
index ede4accfe..9be1b044d 100644
--- a/portal-ui/src/screens/LoginPage/LoginCallback.tsx
+++ b/portal-ui/src/screens/LoginPage/LoginCallback.tsx
@@ -16,7 +16,6 @@
 
 import React, { useEffect, useState } from "react"; // eslint-disable-line @typescript-eslint/no-unused-vars
 import api from "../../common/api";
-import { setErrorSnackMessage } from "../../actions";
 import withStyles from "@mui/styles/withStyles";
 import { Theme } from "@mui/material/styles";
 import createStyles from "@mui/styles/createStyles";
@@ -171,14 +170,10 @@ const styles = (theme: Theme) =>
   });
 
 interface ILoginCallBackProps {
-  setErrorSnackMessage: typeof setErrorSnackMessage;
   classes: any;
 }
 
-const LoginCallback = ({
-  classes,
-  setErrorSnackMessage,
-}: ILoginCallBackProps) => {
+const LoginCallback = ({ classes }: ILoginCallBackProps) => {
   const [error, setError] = useState<string>("");
   const [errorDescription, setErrorDescription] = useState<string>("");
   const [loading, setLoading] = useState<boolean>(true);