Chap05 -> Lazy loading routers

QandA/frontend/src/App.tsx

@@ -7,12 +7,13 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Header } from './Header';
 import { HomePage } from './HomePage';
 import { fontFamily, fontSize, gray2 } from './Styles';
-import { AskPage } from './AskPage';
 import { SearchPage } from './SearchPage';
 import { SignInPage } from './SignInPage';
 import { NotFoundPage } from './NotFoundPage';
 import { QuestionPage } from './QuestionPage';
 
+const AskPage = React.lazy(() => import('./AskPage'));
+
 function App() {
   return (
     <BrowserRouter>
@@ -27,7 +28,25 @@ function App() {
         <Routes>
           <Route path="" element={<HomePage />} />
           <Route path="search" element={<SearchPage />} />
-          <Route path="ask" element={<AskPage />} />
+          <Route
+            path="ask"
+            element={
+              <React.Suspense
+                fallback={
+                  <div
+                    css={css`
+                      margin-top: 100px;
+                      text-align: center;
+                    `}
+                  >
+                    Loading...
+                  </div>
+                }
+              >
+                <AskPage />
+              </React.Suspense>
+            }
+          />
           <Route path="signin" element={<SignInPage />} />
           <Route path="questions/:questionId" element={<QuestionPage />} />
           <Route path="*" element={<NotFoundPage />} />

QandA/frontend/src/AskPage.tsx

@@ -2,3 +2,5 @@ import React from 'react';
 import { Page } from './Page';
 
 export const AskPage = () => <Page title="Ask a question">{null}</Page>;
+
+export default AskPage;