From d7c006d737e0d62c18148ba71d17c231f045171e Mon Sep 17 00:00:00 2001
From: rare-magma <rare-magma@posteo.eu>
Date: Tue, 19 Sep 2023 23:13:23 +0200
Subject: [PATCH] perf: lazy load charts page

Signed-off-by: rare-magma <rare-magma@posteo.eu>
---
 src/components/Budget/BudgetPage.tsx           | 12 +++++++++---
 src/components/LandingPage/LandingPage.tsx     | 14 +++-----------
 src/components/Loading/Loading.test.tsx        | 18 ++++++++++++++++++
 src/components/Loading/Loading.tsx             | 16 ++++++++++++++++
 .../__snapshots__/Loading.test.tsx.snap        |  3 +++
 5 files changed, 49 insertions(+), 14 deletions(-)
 create mode 100644 src/components/Loading/Loading.test.tsx
 create mode 100644 src/components/Loading/Loading.tsx
 create mode 100644 src/components/Loading/__snapshots__/Loading.test.tsx.snap

diff --git a/src/components/Budget/BudgetPage.tsx b/src/components/Budget/BudgetPage.tsx
index 296eaf5..d91376b 100644
--- a/src/components/Budget/BudgetPage.tsx
+++ b/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}>
diff --git a/src/components/LandingPage/LandingPage.tsx b/src/components/LandingPage/LandingPage.tsx
index c7bddce..d61f332 100644
--- a/src/components/LandingPage/LandingPage.tsx
+++ b/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">
diff --git a/src/components/Loading/Loading.test.tsx b/src/components/Loading/Loading.test.tsx
new file mode 100644
index 0000000..a4bcd18
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/components/Loading/Loading.tsx b/src/components/Loading/Loading.tsx
new file mode 100644
index 0000000..6d92d89
--- /dev/null
+++ b/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;
diff --git a/src/components/Loading/__snapshots__/Loading.test.tsx.snap b/src/components/Loading/__snapshots__/Loading.test.tsx.snap
new file mode 100644
index 0000000..9b1fd58
--- /dev/null
+++ b/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 />`;