From 236062c6c6278c4b433463fef9fa37eebf3fd760 Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 9 Aug 2020 16:09:21 +0300
Subject: feat: lazy-load pages

---
 src/components/Feed/Feed.tsx       | 20 ++------------------
 src/components/Loading/Loading.tsx | 24 ++++++++++++++++++++++++
 src/pages/Page.tsx                 | 33 ++++++++++++++++++---------------
 3 files changed, 44 insertions(+), 33 deletions(-)
 create mode 100644 src/components/Loading/Loading.tsx

(limited to 'src')

diff --git a/src/components/Feed/Feed.tsx b/src/components/Feed/Feed.tsx
index 03358da..9918a3d 100644
--- a/src/components/Feed/Feed.tsx
+++ b/src/components/Feed/Feed.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { Poll } from 'which-types';
 import { WindowScroller, AutoSizer, List } from 'react-virtualized';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles } from '@material-ui/core';
 import PollCard from '../PollCard/PollCard';
+import Loading from '../Loading/Loading';
 
 interface PropTypes {
   polls: Poll[];
@@ -15,17 +14,8 @@ interface RenderPropTypes {
   style: React.CSSProperties;
 }
 
-const useStyles = makeStyles(theme => ({
-  loader: {
-    width: '100%',
-    textAlign: 'center',
-    marginTop: theme.spacing(10)
-  }
-}));
 
 const Feed: React.FC<PropTypes> = ({ polls }) => {
-  const classes = useStyles();
-
 
   const RenderItem: React.FC<RenderPropTypes> = ({ index, style, key }) => {
     const poll = polls[index];
@@ -36,12 +26,6 @@ const Feed: React.FC<PropTypes> = ({ polls }) => {
     );
   };
 
-  const loader = (
-    <div className={classes.loader}>
-      <CircularProgress color="primary" style={{ margin: '0 auto' }} />
-    </div>
-  );
-
   const list = (
     <WindowScroller>
       {({
@@ -74,7 +58,7 @@ const Feed: React.FC<PropTypes> = ({ polls }) => {
     </WindowScroller>
   );
 
-  return polls.length ? list : loader;
+  return polls.length ? list : <Loading />;
 };
 
 export default Feed;
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
new file mode 100644
index 0000000..30b8cda
--- /dev/null
+++ b/src/components/Loading/Loading.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import { makeStyles } from '@material-ui/core';
+
+const useStyles = makeStyles(theme => ({
+  loader: {
+    width: '100%',
+    textAlign: 'center',
+    marginTop: theme.spacing(10)
+  }
+}));
+
+const Loading: React.FC = () => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.loader}>
+      <CircularProgress color="primary" style={{ margin: '0 auto' }} />
+    </div>
+  );
+};
+
+export default Loading;
+
diff --git a/src/pages/Page.tsx b/src/pages/Page.tsx
index 668b171..49c941a 100644
--- a/src/pages/Page.tsx
+++ b/src/pages/Page.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
 import { useMediaQuery } from '@material-ui/core';
 import { SnackbarProvider } from 'notistack';
 import { Switch, Route } from 'react-router-dom';
+import Loading from '../components/Loading/Loading';
 
-import ProfilePage from './ProfilePage/ProfilePage';
-import FeedPage from './FeedPage/FeedPage';
-import LoginPage from './LoginPage/LoginPage';
-import RegistrationPage from './RegistrationPage/RegistrationPage';
-import HomePage from './HomePage/HomePage';
-import NotificationsPage from './NotificationsPage/NotificationsPage';
+const ProfilePage = React.lazy(() => import( './ProfilePage/ProfilePage'));
+const FeedPage = React.lazy(() => import( './FeedPage/FeedPage'));
+const LoginPage = React.lazy(() => import( './LoginPage/LoginPage'));
+const RegistrationPage = React.lazy(() => import( './RegistrationPage/RegistrationPage'));
+const HomePage = React.lazy(() => import( './HomePage/HomePage'));
+const NotificationsPage = React.lazy(() => import( './NotificationsPage/NotificationsPage'));
 
 
 const useStyles = makeStyles(theme => ({
@@ -38,14 +39,16 @@ const Page: React.FC = () => {
       }}
     >
       <div className={classes.root}>
-        <Switch>
-          <Route exact path="/" component={HomePage} />
-          <Route exact path="/login" component={LoginPage} />
-          <Route exact path="/registration" component={RegistrationPage} />
-          <Route exact path="/feed" component={FeedPage} />
-          <Route exact path="/notifications" component={NotificationsPage} />
-          <Route path="/profile/:username" component={ProfilePage} />
-        </Switch>
+        <Suspense fallback={<Loading />}>
+          <Switch>
+            <Route exact path="/" component={HomePage} />
+            <Route exact path="/login" component={LoginPage} />
+            <Route exact path="/registration" component={RegistrationPage} />
+            <Route exact path="/feed" component={FeedPage} />
+            <Route exact path="/notifications" component={NotificationsPage} />
+            <Route path="/profile/:username" component={ProfilePage} />
+          </Switch>
+        </Suspense>
       </div>
     </SnackbarProvider>
   );
-- 
cgit v1.2.3