diff options
Diffstat (limited to 'src/App.tsx')
| -rw-r--r-- | src/App.tsx | 17 |
1 files changed, 12 insertions, 5 deletions
diff --git a/src/App.tsx b/src/App.tsx index 19ba6a6..56aff08 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,5 +1,6 @@ /** @jsx jsx */ /** @global location */ +import React, { Suspense } from "react"; import { jsx, Global } from "@emotion/core"; import { @@ -8,14 +9,16 @@ import { Switch } from "react-router-dom"; -import { CSSTransition, TransitionGroup } from "react-transition-group"; +import { HashLoader } from "react-spinners"; -import LandingPage from "./pages/LandingPage"; -import FormPage from "./pages/FormPage"; -import CallbackPage from "./pages/CallbackPage"; +import { CSSTransition, TransitionGroup } from "react-transition-group"; import globalStyles from "./globalStyles"; +const LandingPage = React.lazy(() => import("./pages/LandingPage")); +const FormPage = React.lazy(() => import("./pages/FormPage")); +const CallbackPage = React.lazy(() => import("./pages/CallbackPage")); + const routes = [ { path: "/", Component: LandingPage }, { path: "/form/:id", Component: FormPage}, @@ -36,7 +39,11 @@ function App() { > <Switch location={location}> {routes.map(({path, Component}) => ( - <Route key={path} exact path={path} component={Component}/> + <Route exact key={path} path={path}> + <Suspense fallback={<HashLoader color="white"/>}> + <Component/> + </Suspense> + </Route> ))} </Switch> </CSSTransition> |