Skip to content

Commit 0d2db73

Browse files
simsim0709simsim0709
authored
Apply React.lazy based routes (#33)
1 parent 186e3f4 commit 0d2db73

3 files changed

Lines changed: 78 additions & 120 deletions

File tree

‎src/App.js‎

Lines changed: 44 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,30 @@
11
import { STATE_LOGIN, STATE_SIGNUP } from 'components/AuthForm';
22
import GAListener from 'components/GAListener';
33
import { EmptyLayout, LayoutRoute, MainLayout } from 'components/Layout';
4-
import AlertPage from 'pages/AlertPage';
5-
import AuthModalPage from 'pages/AuthModalPage';
4+
import PageSpinner from 'components/PageSpinner';
65
import AuthPage from 'pages/AuthPage';
7-
import BadgePage from 'pages/BadgePage';
8-
import ButtonGroupPage from 'pages/ButtonGroupPage';
9-
import ButtonPage from 'pages/ButtonPage';
10-
import CardPage from 'pages/CardPage';
11-
import ChartPage from 'pages/ChartPage';
12-
// pages
13-
import DashboardPage from 'pages/DashboardPage';
14-
import DropdownPage from 'pages/DropdownPage';
15-
import FormPage from 'pages/FormPage';
16-
import InputGroupPage from 'pages/InputGroupPage';
17-
import ModalPage from 'pages/ModalPage';
18-
import ProgressPage from 'pages/ProgressPage';
19-
import TablePage from 'pages/TablePage';
20-
import TypographyPage from 'pages/TypographyPage';
21-
import WidgetPage from 'pages/WidgetPage';
226
import React from 'react';
237
import componentQueries from 'react-component-queries';
24-
import { BrowserRouter, Redirect, Switch } from 'react-router-dom';
8+
import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
259
import './styles/reduction.scss';
2610

11+
const AlertPage = React.lazy(() => import('pages/AlertPage'));
12+
const AuthModalPage = React.lazy(() => import('pages/AuthModalPage'));
13+
const BadgePage = React.lazy(() => import('pages/BadgePage'));
14+
const ButtonGroupPage = React.lazy(() => import('pages/ButtonGroupPage'));
15+
const ButtonPage = React.lazy(() => import('pages/ButtonPage'));
16+
const CardPage = React.lazy(() => import('pages/CardPage'));
17+
const ChartPage = React.lazy(() => import('pages/ChartPage'));
18+
const DashboardPage = React.lazy(() => import('pages/DashboardPage'));
19+
const DropdownPage = React.lazy(() => import('pages/DropdownPage'));
20+
const FormPage = React.lazy(() => import('pages/FormPage'));
21+
const InputGroupPage = React.lazy(() => import('pages/InputGroupPage'));
22+
const ModalPage = React.lazy(() => import('pages/ModalPage'));
23+
const ProgressPage = React.lazy(() => import('pages/ProgressPage'));
24+
const TablePage = React.lazy(() => import('pages/TablePage'));
25+
const TypographyPage = React.lazy(() => import('pages/TypographyPage'));
26+
const WidgetPage = React.lazy(() => import('pages/WidgetPage'));
27+
2728
const getBasename = () => {
2829
return `/${process.env.PUBLIC_URL.split('/').pop()}`;
2930
};
@@ -50,108 +51,31 @@ class App extends React.Component {
5051
<AuthPage {...props} authState={STATE_SIGNUP} />
5152
)}
5253
/>
53-
<LayoutRoute
54-
exact
55-
path="/login-modal"
56-
layout={MainLayout}
57-
component={AuthModalPage}
58-
/>
59-
<LayoutRoute
60-
exact
61-
path="/"
62-
layout={MainLayout}
63-
component={DashboardPage}
64-
/>
65-
<LayoutRoute
66-
exact
67-
path="/buttons"
68-
layout={MainLayout}
69-
component={ButtonPage}
70-
/>
71-
<LayoutRoute
72-
exact
73-
path="/cards"
74-
layout={MainLayout}
75-
component={CardPage}
76-
/>
77-
<LayoutRoute
78-
exact
79-
path="/widgets"
80-
layout={MainLayout}
81-
component={WidgetPage}
82-
/>
83-
<LayoutRoute
84-
exact
85-
path="/typography"
86-
layout={MainLayout}
87-
component={TypographyPage}
88-
/>
89-
<LayoutRoute
90-
exact
91-
path="/alerts"
92-
layout={MainLayout}
93-
component={AlertPage}
94-
/>
95-
<LayoutRoute
96-
exact
97-
path="/tables"
98-
layout={MainLayout}
99-
component={TablePage}
100-
/>
101-
<LayoutRoute
102-
exact
103-
path="/badges"
104-
layout={MainLayout}
105-
component={BadgePage}
106-
/>
107-
<LayoutRoute
108-
exact
109-
path="/button-groups"
110-
layout={MainLayout}
111-
component={ButtonGroupPage}
112-
/>
113-
<LayoutRoute
114-
exact
115-
path="/dropdowns"
116-
layout={MainLayout}
117-
component={DropdownPage}
118-
/>
119-
<LayoutRoute
120-
exact
121-
path="/progress"
122-
layout={MainLayout}
123-
component={ProgressPage}
124-
/>
125-
<LayoutRoute
126-
exact
127-
path="/modals"
128-
layout={MainLayout}
129-
component={ModalPage}
130-
/>
131-
<LayoutRoute
132-
exact
133-
path="/forms"
134-
layout={MainLayout}
135-
component={FormPage}
136-
/>
137-
<LayoutRoute
138-
exact
139-
path="/input-groups"
140-
layout={MainLayout}
141-
component={InputGroupPage}
142-
/>
143-
<LayoutRoute
144-
exact
145-
path="/charts"
146-
layout={MainLayout}
147-
component={ChartPage}
148-
/>
149-
<LayoutRoute
150-
exact
151-
path="/register"
152-
layout={MainLayout}
153-
component={AuthPage}
154-
/>
54+
55+
<MainLayout breakpoint={this.props.breakpoint}>
56+
<React.Suspense fallback={<PageSpinner />}>
57+
<Route exact path="/" component={DashboardPage} />
58+
<Route exact path="/login-modal" component={AuthModalPage} />
59+
<Route exact path="/buttons" component={ButtonPage} />
60+
<Route exact path="/cards" component={CardPage} />
61+
<Route exact path="/widgets" component={WidgetPage} />
62+
<Route exact path="/typography" component={TypographyPage} />
63+
<Route exact path="/alerts" component={AlertPage} />
64+
<Route exact path="/tables" component={TablePage} />
65+
<Route exact path="/badges" component={BadgePage} />
66+
<Route
67+
exact
68+
path="/button-groups"
69+
component={ButtonGroupPage}
70+
/>
71+
<Route exact path="/dropdowns" component={DropdownPage} />
72+
<Route exact path="/progress" component={ProgressPage} />
73+
<Route exact path="/modals" component={ModalPage} />
74+
<Route exact path="/forms" component={FormPage} />
75+
<Route exact path="/input-groups" component={InputGroupPage} />
76+
<Route exact path="/charts" component={ChartPage} />
77+
</React.Suspense>
78+
</MainLayout>
15579
<Redirect to="/" />
15680
</Switch>
15781
</GAListener>

‎src/components/PageSpinner.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import PropTypes from 'prop-types';
2+
import React from 'react';
3+
import { Spinner } from 'reactstrap';
4+
5+
const PageSpinner = ({ color = 'primary' }) => {
6+
return (
7+
<div className="cr-page-spinner">
8+
<Spinner color={color} />
9+
</div>
10+
);
11+
};
12+
13+
PageSpinner.propTypes = {
14+
color: PropTypes.oneOf([
15+
'primary',
16+
'secondary',
17+
'success',
18+
'danger',
19+
'warning',
20+
'info',
21+
'light',
22+
'dark',
23+
]),
24+
};
25+
26+
export default PageSpinner;

‎src/styles/components/_page.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,11 @@
3737
}
3838
}
3939
}
40+
41+
.cr-page-spinner {
42+
width: 100%;
43+
height: 100%;
44+
display: flex;
45+
justify-content: center;
46+
align-items: center;
47+
}

0 commit comments

Comments
 (0)