src/components/PageSpinner/PageSpinner.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import { Flex, Spinner } from '@chakra-ui/react';
+
+export const PageSpinner: FC = () => {
+  return (
+    <Flex w='full' h='100vh' justifyContent='center' alignItems='center'>
+      <Spinner
+        thickness='5px'
+        speed='0.65s'
+        emptyColor='gray.200'
+        color='green.500'
+        size='xl'
+      />
+    </Flex>
+  );
+};

src/components/PageSpinner/index.ts

@@ -0,0 +1 @@
+export { PageSpinner } from './PageSpinner';

src/components/index.ts

@@ -0,0 +1 @@
+export * from './PageSpinner';

src/routes.tsx

@@ -1,16 +1,24 @@
-import React from 'react';
+import React, { lazy, Suspense } from 'react';
 import { Routes, Route } from 'react-router-dom';
+import { PageSpinner } from './components';
 import Arm from './pages/arm';
-import Order from './pages/order-view';
-import Landing from './pages/landing';
+
+const Landing = lazy(() => import('./pages/landing'));
+const OrderForm = lazy(() => import('./pages/order-form'));
+const OrderView = lazy(() => import('./pages/order-view'));
 
 const Routers = () => {
   return (
-    <Routes>
-      <Route path='/dry-wash' element={<Landing />}></Route>
-      <Route path='/dry-wash/order' element={<Order />}></Route>
-      <Route path='/dry-wash/arm' element={<Arm />}></Route>
-    </Routes>
+    <Suspense fallback={<PageSpinner />}>
+      <Routes>
+        <Route path='/dry-wash'>
+          <Route index element={<Landing />} />
+          <Route path='order-form' element={<OrderForm />} />
+          <Route path='order-view' element={<OrderView />} />
+        </Route>
+        <Route path='/dry-wash/arm' element={<Arm />}></Route>
+      </Routes>
+    </Suspense>
   );
 };