⚡ Code split routes

.gitignore

@@ -11,6 +11,6 @@ CACHE/
 media/
 tmp/
 frontend/dist
-static/modern
+static/
 .python-version
 .env

frontend/src/App.tsx

@@ -7,7 +7,6 @@ import { Routes } from "./Routes";
 import client from "./client";
 import { Footer } from "./components/Footer";
 import { Header } from "./components/Header";
-import { Splash as Splash } from "./components/Splash";
 import { Toast } from "./components/Toast";
 import { ToastProvider } from "./components/ToastProvider";
 import { Wireframe } from "./components/Wireframe";

frontend/src/Routes.tsx

@@ -1,28 +1,30 @@
 import React from "react";
 import { Route, Routes as ReactRouterRoutes } from "react-router-dom";
 
-import { Splash } from "./components/Splash";
-import { UserCreate } from "./features/auth/UserCreate";
-import { Deposit } from "./features/deposit/Deposit";
-import { Log } from "./features/log/Log";
-import { Register } from "./features/register/Register";
-import { OrderStats } from "./features/stats/OrderStats";
-import { ProductStats } from "./features/stats/ProductStats";
-import { Stats } from "./features/stats/Stats";
-import { UserDetail } from "./features/users/UserDetail";
-import { UserList } from "./features/users/UserList";
+const Splash = React.lazy(() => import("./components/Splash"));
+const UserCreate = React.lazy(() => import("./features/auth/UserCreate"));
+const Deposit = React.lazy(() => import("./features/deposit/Deposit"));
+const Log = React.lazy(() => import("./features/log/Log"));
+const Register = React.lazy(() => import("./features/register/Register"));
+const OrderStats = React.lazy(() => import("./features/stats/OrderStats"));
+const ProductStats = React.lazy(() => import("./features/stats/ProductStats"));
+const Stats = React.lazy(() => import("./features/stats/Stats"));
+const UserDetail = React.lazy(() => import("./features/users/UserDetail"));
+const UserList = React.lazy(() => import("./features/users/UserList"));
 
 export const Routes = (): JSX.Element => (
-  <ReactRouterRoutes>
-    <Route path="/deposit" element={<Deposit />} />
-    <Route path="/log" element={<Log />} />
-    <Route path="/stats" element={<Stats />} />
-    <Route path="/stats/orders" element={<OrderStats />} />
-    <Route path="/stats/products" element={<ProductStats />} />
-    <Route path="/users" element={<UserList />} />
-    <Route path="/users/create" element={<UserCreate />} />
-    <Route path="/user/:userId" element={<UserDetail />} />
-    <Route path="/" element={<Register />} />
-    <Route path="*" element={<Splash brandText="404" noOverlay />} />
-  </ReactRouterRoutes>
+  <React.Suspense fallback={<div>Loading...</div>}>
+    <ReactRouterRoutes>
+      <Route path="/deposit" element={<Deposit />} />
+      <Route path="/log" element={<Log />} />
+      <Route path="/stats" element={<Stats />} />
+      <Route path="/stats/orders" element={<OrderStats />} />
+      <Route path="/stats/products" element={<ProductStats />} />
+      <Route path="/users" element={<UserList />} />
+      <Route path="/users/create" element={<UserCreate />} />
+      <Route path="/user/:userId" element={<UserDetail />} />
+      <Route path="/" element={<Register />} />
+      <Route path="*" element={<Splash brandText="404" noOverlay />} />
+    </ReactRouterRoutes>
+  </React.Suspense>
 );

frontend/src/components/Splash.tsx

@@ -8,7 +8,7 @@ interface SplashProps {
   noOverlay?: boolean;
 }
 
-export const Splash = ({ brandText = "BBS", noOverlay = false }: SplashProps): JSX.Element => (
+const Splash = ({ brandText = "BBS", noOverlay = false }: SplashProps): JSX.Element => (
   <div className={clsx(styles.splash, { [styles.overlay]: !noOverlay })}>
     <div className={styles.wrap}>
       <div className={styles.sun}></div>
@@ -17,3 +17,4 @@ export const Splash = ({ brandText = "BBS", noOverlay = false }: SplashProps): J
     </div>
   </div>
 );
+export default Splash;

frontend/src/features/auth/UserCreate.tsx

@@ -11,7 +11,7 @@ type FormValues = {
   email: string;
 };
 
-export const UserCreate = () => {
+const UserCreate = () => {
   const {
     register,
     handleSubmit,
@@ -48,3 +48,4 @@ export const UserCreate = () => {
     </div>
   );
 };
+export default UserCreate;

frontend/src/features/deposit/Deposit.tsx

@@ -4,7 +4,7 @@ import { UserCard } from "../users/UserCard";
 import styles from "./Deposit.module.css";
 import { useDeposit } from "./useDeposit";
 
-export const Deposit = (): JSX.Element => {
+const Deposit = (): JSX.Element => {
   const {
     loading,
     selectedUser,
@@ -65,3 +65,4 @@ export const Deposit = (): JSX.Element => {
     </div>
   );
 };
+export default Deposit;

frontend/src/features/log/Log.tsx

@@ -9,7 +9,7 @@ import styles from "./Log.module.css";
 
 const PAGE_SIZE = 10;
 
-export const Log = () => {
+const Log = () => {
   const types = {
     orderOffset: Number,
     transactionOffset: Number,
@@ -139,3 +139,4 @@ export const Log = () => {
     </div>
   );
 };
+export default Log;

frontend/src/features/register/Register.tsx

@@ -8,7 +8,7 @@ import { useRegister } from "./useRegister";
 
 const USER_EXTERNAL = "external";
 
-export const Register = (): JSX.Element => {
+const Register = (): JSX.Element => {
   const {
     users,
     products,
@@ -80,3 +80,4 @@ export const Register = (): JSX.Element => {
     </div>
   );
 };
+export default Register;

frontend/src/features/stats/OrderStats.tsx

@@ -35,7 +35,7 @@ const OrderBar = ({ data }: { data: BarDatum[] }) => (
   />
 );
 
-export const OrderStats = () => {
+const OrderStats = () => {
   const { data, loading } = useQuery(OrderStatsDocument);
 
   return (
@@ -77,3 +77,4 @@ export const OrderStats = () => {
     </StatsView>
   );
 };
+export default OrderStats;

frontend/src/features/stats/ProductStats.tsx

@@ -11,7 +11,7 @@ type UserCount = {
   count: number;
 };
 
-export const ProductStats = () => {
+const ProductStats = () => {
   const { data, loading } = useQuery(AllProductStatsDocument, {
     variables: { active: true },
   });
@@ -38,3 +38,4 @@ export const ProductStats = () => {
     </StatsView>
   );
 };
+export default ProductStats;

frontend/src/features/stats/Stats.tsx

@@ -5,7 +5,7 @@ import React from "react";
 import { ProductStatsDocument } from "../../types";
 import { StatsView } from "./StatsView";
 
-export const Stats = () => {
+const Stats = () => {
   const { data, loading } = useQuery(ProductStatsDocument);
 
   const series: any[] = [];
@@ -68,3 +68,4 @@ export const Stats = () => {
     </StatsView>
   );
 };
+export default Stats;

frontend/src/features/users/UserDetail.tsx

@@ -7,7 +7,7 @@ import { User, UserDetailDocument, UserProfile } from "../../types";
 import { formatMonth, formatTime } from "../../utils/time";
 import styles from "./UserDetail.module.css";
 
-export const UserDetail = () => {
+const UserDetail = () => {
   const { userId } = useParams();
   const { data, loading } = useQuery(UserDetailDocument, { variables: { userId: userId || "" }, skip: !userId });
 
@@ -108,3 +108,4 @@ export const UserDetail = () => {
     </div>
   );
 };
+export default UserDetail;

frontend/src/features/users/UserList.tsx

@@ -5,7 +5,7 @@ import { Link } from "react-router-dom";
 import { AllUsersDocument } from "../../types";
 import { activeUserFilter } from "../../utils/users";
 
-export const UserList = () => {
+const UserList = () => {
   const { data, loading } = useQuery(AllUsersDocument);
   const [showAll, setShowAll] = useState(false);
 
@@ -35,3 +35,4 @@ export const UserList = () => {
     </div>
   );
 };
+export default UserList;