perf: lazy load charts page

Signed-off-by: rare-magma <[email protected]>

src/components/Budget/BudgetPage.tsx

@@ -1,5 +1,5 @@
 import Papa from "papaparse";
-import { useEffect, useRef, useState } from "react";
+import { Suspense, lazy, useEffect, useRef, useState } from "react";
 import { Col, Container, Row, ToastContainer } from "react-bootstrap";
 import { Option } from "react-bootstrap-typeahead/types/types";
 import { useHotkeys } from "react-hotkeys-hook";
@@ -19,9 +19,9 @@ import {
   roundBig,
   userLang,
 } from "../../utils";
-import ChartsPage from "../ChartsPage/ChartsPage";
 import ErrorModal, { CsvError, JsonError } from "../ErrorModal/ErrorModal";
 import LandingPage from "../LandingPage/LandingPage";
+import Loading from "../Loading/Loading";
 import NavBar from "../NavBar/NavBar";
 import Notification from "../Notification/Notification";
 import { Stat } from "../StatCard/Stat";
@@ -32,6 +32,8 @@ import TableCard from "../TableCard/TableCard";
 import { Budget } from "./Budget";
 // import { useWhatChanged } from "@simbathesailor/use-what-changed";
 
+const ChartsPage = lazy(() => import("../ChartsPage/ChartsPage"));
+
 function BudgetPage() {
   const inputRef = useRef<HTMLInputElement>(null);
 
@@ -606,7 +608,11 @@ function BudgetPage() {
         }}
       />
 
-      {showGraphs && <ChartsPage onShowGraphs={() => setShowGraphs(false)} />}
+      {showGraphs && (
+        <Suspense fallback={<Loading />}>
+          <ChartsPage onShowGraphs={() => setShowGraphs(false)} />
+        </Suspense>
+      )}
 
       {!loading && !showGraphs && budget?.id && (
         <Container key={budget.id}>

src/components/LandingPage/LandingPage.tsx

@@ -1,6 +1,7 @@
 import { RefObject } from "react";
-import { Button, Container, Form, Row, Spinner, Stack } from "react-bootstrap";
+import { Button, Container, Form, Row, Stack } from "react-bootstrap";
 import { useBudget } from "../../context/BudgetContext";
+import Loading from "../Loading/Loading";
 
 interface LandingPageProps {
   loading: boolean;
@@ -22,16 +23,7 @@ function LandingPage({ loading, inputRef, onNew, onImport }: LandingPageProps) {
 
   return (
     <>
-      {loading && (
-        <Container
-          fluid
-          className="position-absolute top-50 start-50 translate-middle"
-        >
-          <Row className="justify-content-center">
-            <Spinner animation="border" role="status" />
-          </Row>
-        </Container>
-      )}
+      {loading && <Loading />}
 
       {!loading && !budget && budgetList && budgetList.length < 1 && (
         <Container className="position-absolute top-50 start-50 translate-middle">

src/components/Loading/Loading.test.tsx

@@ -0,0 +1,18 @@
+import { render, screen } from "@testing-library/react";
+import Loading from "./Loading";
+
+describe("Loading", () => {
+  const comp = <Loading />;
+
+  beforeEach(() => {
+    render(comp);
+  });
+
+  it("matches snapshot", () => {
+    expect(comp).toMatchSnapshot();
+  });
+
+  it("renders initial state", () => {
+    expect(screen.getByRole("status")).toBeInTheDocument();
+  });
+});

src/components/Loading/Loading.tsx

@@ -0,0 +1,16 @@
+import { Container, Row, Spinner } from "react-bootstrap";
+
+function Loading() {
+  return (
+    <Container
+      fluid
+      className="position-absolute top-50 start-50 translate-middle"
+    >
+      <Row className="justify-content-center">
+        <Spinner animation="border" role="status" />
+      </Row>
+    </Container>
+  );
+}
+
+export default Loading;

src/components/Loading/__snapshots__/Loading.test.tsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Loading > matches snapshot 1`] = `<Loading />`;