Skip to content

Commit 0bbd4f0

Browse files
authored
Lazy Load Login Screens and Menu Icons (#1244)
Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>
1 parent 1fa4d19 commit 0bbd4f0

File tree

5 files changed

+142
-64
lines changed

5 files changed

+142
-64
lines changed

portal-ui/src/Routes.tsx

Lines changed: 25 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,41 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

17-
import React from "react";
17+
import React, { Suspense } from "react";
1818
import { Route, Router, Switch } from "react-router-dom";
1919
import history from "./history";
20-
import Login from "./screens/LoginPage/LoginPage";
20+
2121
import Console from "./screens/Console/Console";
22-
import LoginCallback from "./screens/LoginPage/LoginCallback";
2322
import { hot } from "react-hot-loader/root";
2423
import ProtectedRoute from "./ProtectedRoutes";
2524

25+
const Login = React.lazy(() => import("./screens/LoginPage/LoginPage"));
26+
const LoginCallback = React.lazy(
27+
() => import("./screens/LoginPage/LoginCallback")
28+
);
29+
2630
const Routes = () => {
2731
return (
2832
<Router history={history}>
2933
<Switch>
30-
<Route exact path="/oauth_callback" component={LoginCallback} />
31-
<Route exact path="/login" component={Login} />
34+
<Route
35+
exact
36+
path="/oauth_callback"
37+
children={(routerProps) => (
38+
<Suspense fallback={<div>Loading...</div>}>
39+
<LoginCallback />
40+
</Suspense>
41+
)}
42+
/>
43+
<Route
44+
exact
45+
path="/login"
46+
children={(routerProps) => (
47+
<Suspense fallback={<div>Loading...</div>}>
48+
<Login />
49+
</Suspense>
50+
)}
51+
/>
3252
<ProtectedRoute Component={Console} />
3353
</Switch>
3454
</Router>

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

Lines changed: 60 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,20 @@
1414
// You should have received a copy of the GNU Affero General Public License
1515
// along with this program. If not, see <http://www.gnu.org/licenses/>.
1616

17-
import React from "react";
17+
import React, { Suspense } from "react";
1818
import history from "../../../history";
1919
import { Redirect, Route, Router, Switch, withRouter } from "react-router-dom";
2020
import { connect } from "react-redux";
2121
import { AppState } from "../../../store";
2222
import { setMenuOpen } from "../../../actions";
2323
import NotFoundPage from "../../NotFoundPage";
24-
import ListBuckets from "./ListBuckets/ListBuckets";
25-
import BucketDetails from "./BucketDetails/BucketDetails";
26-
import BrowserHandler from "./BucketDetails/BrowserHandler";
27-
import AddBucket from "./ListBuckets/AddBucket";
24+
25+
const ListBuckets = React.lazy(() => import("./ListBuckets/ListBuckets"));
26+
const BucketDetails = React.lazy(() => import("./BucketDetails/BucketDetails"));
27+
const BrowserHandler = React.lazy(
28+
() => import("./BucketDetails/BrowserHandler")
29+
);
30+
const AddBucket = React.lazy(() => import("./ListBuckets/AddBucket"));
2831

2932
const mapState = (state: AppState) => ({
3033
open: state.system.sidebarOpen,
@@ -36,20 +39,65 @@ const Buckets = () => {
3639
return (
3740
<Router history={history}>
3841
<Switch>
39-
<Route path="/add-bucket" component={AddBucket} />
40-
<Route path="/buckets/:bucketName/admin/*" component={BucketDetails} />
41-
<Route path="/buckets/:bucketName/admin" component={BucketDetails} />
42+
<Route
43+
path="/add-bucket"
44+
children={(routerProps) => (
45+
<Suspense fallback={<div>Loading...</div>}>
46+
<AddBucket />
47+
</Suspense>
48+
)}
49+
/>
50+
<Route
51+
path="/buckets/:bucketName/admin/*"
52+
children={(routerProps) => (
53+
<Suspense fallback={<div>Loading...</div>}>
54+
<BucketDetails {...routerProps} />
55+
</Suspense>
56+
)}
57+
/>
58+
<Route
59+
path="/buckets/:bucketName/admin"
60+
children={(routerProps) => (
61+
<Suspense fallback={<div>Loading...</div>}>
62+
<BucketDetails {...routerProps} />
63+
</Suspense>
64+
)}
65+
/>
4266
<Route
4367
path="/buckets/:bucketName/browse/:subpaths+"
44-
component={BrowserHandler}
68+
children={(routerProps) => (
69+
<Suspense fallback={<div>Loading...</div>}>
70+
<BrowserHandler {...routerProps} />
71+
</Suspense>
72+
)}
73+
/>
74+
<Route
75+
path="/buckets/:bucketName/browse"
76+
children={(routerProps) => (
77+
<Suspense fallback={<div>Loading...</div>}>
78+
<BrowserHandler {...routerProps} />
79+
</Suspense>
80+
)}
4581
/>
46-
<Route path="/buckets/:bucketName/browse" component={BrowserHandler} />
4782
<Route
4883
path="/buckets/:bucketName"
4984
component={() => <Redirect to={`/buckets`} />}
5085
/>
51-
<Route path="/" component={ListBuckets} />
52-
<Route component={NotFoundPage} />
86+
<Route
87+
path="/"
88+
children={(routerProps) => (
89+
<Suspense fallback={<div>Loading...</div>}>
90+
<ListBuckets {...routerProps} />
91+
</Suspense>
92+
)}
93+
/>
94+
<Route
95+
children={(routerProps) => (
96+
<Suspense fallback={<div>Loading...</div>}>
97+
<NotFoundPage />
98+
</Suspense>
99+
)}
100+
/>
53101
</Switch>
54102
</Router>
55103
);

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,6 @@ const styles = (theme: Theme) =>
9999

100100
interface IAddBucketProps {
101101
classes: any;
102-
open: boolean;
103102
addBucketName: typeof addBucketName;
104103
addBucketVersioned: typeof addBucketVersioning;
105104
enableObjectLocking: typeof addBucketEnableObjectLocking;

0 commit comments

Comments
 (0)