src/App.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

/** @jsx jsx */
/** @global location */
import React, { Suspense } from "react";
import { jsx, css, Global } from "@emotion/react";

import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";

import { HashLoader } from "react-spinners";

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},
  { path: "/callback", Component: CallbackPage }
]

function PageLoading() {
  return <div css={css`
    display: flex;
    justify-content: center;
    margin-top: 50px;
  `}>
    <HashLoader color="white" size={100}/>
  </div>
}

function App() {
  return (
    <div>
      <Global styles={globalStyles}/>
      <Router>
        <Route render={({ location }) => (
          <TransitionGroup>
            <CSSTransition
              key={location.pathname}
              classNames="fade"
              timeout={300}
            >
              <Switch location={location}>
                {routes.map(({path, Component}) => (
                  <Route exact key={path} path={path}>
                    <Suspense fallback={<PageLoading/>}>
                      <Component/>
                    </Suspense>
                  </Route>
                ))}
              </Switch>
            </CSSTransition>
          </TransitionGroup>
        )}/>
      </Router>
    </div>
  );
};

export default App;