lazy-load route components

src/components/Routes/index.tsx

@@ -1,30 +1,29 @@
-import React from "react";
+import React, { Suspense } from "react";
 import { BrowserRouter, Switch, Route } from "react-router-dom";
-import {
-  AppBar,
-  Calendar,
-  Councils,
-  Curation,
-  Dashboard,
-  Forum,
-  Member,
-  Members,
-  Mint,
-  Proposals,
-  Proposal,
-  Timeline,
-  Tokenomics,
-  Validators,
-  Spending,
-  Storage,
-  Transactions,
-  Bounties,
-  Burners,
-  ValidatorReport,
-} from "..";
-
+import { AppBar, Spinner } from "..";
 import { IState } from "../../types";
 
+const Calendar = React.lazy(() => import("../Calendar"));
+const Council = React.lazy(() => import("../Council"));
+const Councils = React.lazy(() => import("../Councils"));
+const Curation = React.lazy(() => import("../Curation"));
+const Dashboard = React.lazy(() => import("../Dashboard"));
+const Forum = React.lazy(() => import("../Forum"));
+const Member = React.lazy(() => import("../Members/Member"));
+const Members = React.lazy(() => import("../Members"));
+const Mint = React.lazy(() => import("../Mint"));
+const Proposals = React.lazy(() => import("../Proposals"));
+const Proposal = React.lazy(() => import("../Proposals/Proposal"));
+const Spending = React.lazy(() => import("../Proposals/Spending"));
+const Timeline = React.lazy(() => import("../Timeline"));
+const Tokenomics = React.lazy(() => import("../Tokenomics"));
+const Validators = React.lazy(() => import("../Validators"));
+const Storage = React.lazy(() => import("../Storage"));
+const Transactions = React.lazy(() => import("../Transactions"));
+const Bounties = React.lazy(() => import("../Bounties"));
+const Burners = React.lazy(() => import("../Burners"));
+const ValidatorReport = React.lazy(() => import("../ValidatorReport"));
+
 interface IProps extends IState {
   toggleStar: (a: string) => void;
   toggleFooter: () => void;
@@ -40,89 +39,100 @@ const Routes = (props: IProps) => {
           <AppBar />
         </div>
         <div>
-          <Switch>
-            <Route
-              path="/tokenomics"
-              render={(routeprops) => (
-                <Tokenomics
-                  {...routeprops}
-                  reports={reports}
-                  tokenomics={tokenomics}
-                />
-              )}
-            />
-            <Route
-              path="/spending"
-              render={(routeprops) => <Spending {...routeprops} {...props} />}
-            />
-            <Route
-              path="/proposals/:id"
-              render={(routeprops) => <Proposal {...routeprops} {...props} />}
-            />
-            <Route path="/proposals" render={() => <Proposals {...props} />} />
-            <Route
-              path="/councils"
-              render={(routeprops) => <Councils {...routeprops} {...props} />}
-            />
-            <Route
-              path="/curation"
-              render={(routeprops) => <Curation {...routeprops} {...props} />}
-            />
-            <Route
-              path="/forum/threads/:thread"
-              render={(routeprops) => <Forum {...routeprops} {...props} />}
-            />
-            <Route path="/forum" render={() => <Forum {...props} />} />
-            <Route
-              path="/mint"
-              render={(routeprops) => <Mint {...routeprops} {...props} />}
-            />
-            <Route
-              path="/members/:handle"
-              render={(routeprops) => <Member {...routeprops} {...props} />}
-            />
-            <Route
-              path="/members"
-              render={(routeprops) => <Members {...routeprops} {...props} />}
-            />
-            <Route
-              path="/calendar"
-              render={(routeprops) => <Calendar {...routeprops} {...props} />}
-            />
-            <Route
-              path="/timeline"
-              render={(routeprops) => <Timeline {...routeprops} {...props} />}
-            />
-            <Route
-              path="/validators"
-              render={(routeprops) => <Validators {...routeprops} {...props} />}
-            />
-            <Route
-              path="/validator-report"
-              render={(routeprops) => (
-                <ValidatorReport {...routeprops} {...props} />
-              )}
-            />
-            <Route
-              path="/storage"
-              render={(routeprops) => <Storage {...routeprops} {...props} />}
-            />
-            <Route
-              path="/transactions"
-              render={(routeprops) => (
-                <Transactions {...routeprops} {...props} />
-              )}
-            />
-            <Route
-              path="/bounties"
-              render={(routeprops) => <Bounties {...routeprops} {...props} />}
-            />
-            <Route
-              path="/burners"
-              render={(routeprops) => <Burners {...routeprops} {...props} />}
-            />
-            <Route path="/" render={() => <Dashboard {...props} />} />
-          </Switch>
+          <Suspense fallback={<Spinner />}>
+            <Switch>
+              <Route
+                path="/tokenomics"
+                render={(routeprops) => (
+                  <Tokenomics
+                    {...routeprops}
+                    reports={reports}
+                    tokenomics={tokenomics}
+                  />
+                )}
+              />
+              <Route
+                path="/spending"
+                render={(routeprops) => <Spending {...routeprops} {...props} />}
+              />
+              <Route
+                path="/proposals/:id"
+                render={(routeprops) => <Proposal {...routeprops} {...props} />}
+              />
+              <Route
+                path="/proposals"
+                render={() => <Proposals {...props} />}
+              />
+              <Route
+                path="/councils"
+                render={(routeprops) => <Councils {...routeprops} {...props} />}
+              />
+              <Route
+                path="/council"
+                render={(routeprops) => <Council {...routeprops} {...props} />}
+              />
+              <Route
+                path="/curation"
+                render={(routeprops) => <Curation {...routeprops} {...props} />}
+              />
+              <Route
+                path="/forum/threads/:thread"
+                render={(routeprops) => <Forum {...routeprops} {...props} />}
+              />
+              <Route path="/forum" render={() => <Forum {...props} />} />
+              <Route
+                path="/mint"
+                render={(routeprops) => <Mint {...routeprops} {...props} />}
+              />
+              <Route
+                path="/members/:handle"
+                render={(routeprops) => <Member {...routeprops} {...props} />}
+              />
+              <Route
+                path="/members"
+                render={(routeprops) => <Members {...routeprops} {...props} />}
+              />
+              <Route
+                path="/calendar"
+                render={(routeprops) => <Calendar {...routeprops} {...props} />}
+              />
+              <Route
+                path="/timeline"
+                render={(routeprops) => <Timeline {...routeprops} {...props} />}
+              />
+              <Route
+                path="/validators"
+                render={(routeprops) => (
+                  <Validators {...routeprops} {...props} />
+                )}
+              />
+              <Route
+                path="/validator-report"
+                render={(routeprops) => (
+                  <ValidatorReport {...routeprops} {...props} />
+                )}
+              />
+              <Route
+                path="/storage"
+                render={(routeprops) => <Storage {...routeprops} {...props} />}
+              />
+              <Route
+                path="/transactions"
+                render={(routeprops) => (
+                  <Transactions {...routeprops} {...props} />
+                )}
+              />
+              <Route
+                path="/bounties"
+                render={(routeprops) => <Bounties {...routeprops} {...props} />}
+              />
+              <Route
+                path="/burners"
+                render={(routeprops) => <Burners {...routeprops} {...props} />}
+              />
+              <Route path="/" render={() => <Dashboard {...props} />} />
+            </Switch>
+          </Suspense>
         </div>
       </BrowserRouter>
     </div>

src/components/Spinner.tsx

@@ -0,0 +1,11 @@
+import { Spinner } from "react-bootstrap";
+
+const Spin = () => {
+  return (
+    <div className="mt-5 d-flex flex-grow-1 text-center justify-content-center">
+      <Spinner animation="border" variant="dark" size="sm" />
+    </div>
+  );
+};
+
+export default Spin;

src/components/index.ts

@@ -30,6 +30,7 @@ export { default as ValidatorReport } from "./ValidatorReport";
 export { default as Timeline } from "./Timeline";
 export { default as TableFromObject } from "./TableFromObject";
 
+export { default as Spinner } from "./Spinner";
 export { default as Modals } from "./Modals";
 export { default as Footer } from "./Dashboard/Footer";
 export { default as Status } from "./Dashboard/Status";