From f2b75fb69945e43f33c9f3a617b70aae52d0c70f Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Mon, 26 Feb 2024 16:28:16 -0800
Subject: [PATCH 1/7] Created Loader component and added fallback loader for
 citation-data-insights

---
 packages/ui/src/components/loader/index.ts    |  1 +
 packages/ui/src/components/loader/loader.tsx  | 37 +++++++++++++++++++
 .../citation/ui/citation-data-insights.tsx    | 11 ++++--
 3 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 packages/ui/src/components/loader/index.ts
 create mode 100644 packages/ui/src/components/loader/loader.tsx

diff --git a/packages/ui/src/components/loader/index.ts b/packages/ui/src/components/loader/index.ts
new file mode 100644
index 00000000..537ea6ba
--- /dev/null
+++ b/packages/ui/src/components/loader/index.ts
@@ -0,0 +1 @@
+export { default } from "./loader";
diff --git a/packages/ui/src/components/loader/loader.tsx b/packages/ui/src/components/loader/loader.tsx
new file mode 100644
index 00000000..d8d2e918
--- /dev/null
+++ b/packages/ui/src/components/loader/loader.tsx
@@ -0,0 +1,37 @@
+interface LoaderProps {
+  height?: string;
+  width?: string;
+  textColor?: string;
+  spinnerColor?: string;
+  spinnerSize?: string;
+  backgroundColor?: string;
+}
+
+const Loader: React.FC<LoaderProps> = ({
+  height = "16",
+  width = "16",
+  textColor = "blue-500",
+  spinnerColor = "#1d4ed8",
+  spinnerSize = "12",
+  backgroundColor = "gray-100",
+}) => {
+  return (
+    <div className={`bg-${backgroundColor} h-${height} w-${width} flex flex-col items-center justify-center`}>
+      <svg
+        className={`-ml-1 mb-2 mr-3 h-${spinnerSize} w-${spinnerSize} animate-spin text-white`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24">
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path
+          className="opacity-75"
+          fill={spinnerColor}
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+
+      <p className={`text-${textColor} font-medium`}>Loading...</p>
+    </div>
+  );
+};
+
+export default Loader;
diff --git a/packages/website/src/features/citation/ui/citation-data-insights.tsx b/packages/website/src/features/citation/ui/citation-data-insights.tsx
index 7480ef69..ea102371 100644
--- a/packages/website/src/features/citation/ui/citation-data-insights.tsx
+++ b/packages/website/src/features/citation/ui/citation-data-insights.tsx
@@ -1,5 +1,6 @@
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import { VisualizationStub } from "@/shared/ui/visualization";
+import React, { Suspense } from "react";
+import Loader from "@lucky-parking/ui/src/components/loader";
 
 interface CitationDataset {
   name?: string;
@@ -15,6 +16,8 @@ interface CitationDataInsightsProps {
   title: string;
 }
 
+const LazyVisualizationStub = React.lazy(() => import("@/shared/ui/visualization/visualization-stub"));
+
 export default function CitationDataInsights(props: CitationDataInsightsProps) {
   const { category, datasets, dates, onClick, stat, title } = props;
 
@@ -35,8 +38,10 @@ export default function CitationDataInsights(props: CitationDataInsightsProps) {
       {datasets.map(({ name, data }, index) => (
         <div className="flex flex-col" key={name || `${title}-${index}`}>
           {name && <p className="paragraph-3 text-center font-semibold">{name}</p>}
-          {/*// @ts-ignore*/}
-          <VisualizationStub data={data} />
+          <Suspense fallback={<Loader height="64" width="full" />}>
+            {/*// @ts-ignore*/}
+            <LazyVisualizationStub data={data} />
+          </Suspense>
         </div>
       ))}
 

From c1de6a77d3ab0d145c5fd45413c2f57cd8904a6f Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Mon, 26 Feb 2024 17:32:58 -0800
Subject: [PATCH 2/7] Added tests for the Loader component

---
 .../ui/src/components/loader/loader.test.tsx  | 23 +++++++++++++++++++
 packages/ui/src/components/loader/loader.tsx  |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/components/loader/loader.test.tsx

diff --git a/packages/ui/src/components/loader/loader.test.tsx b/packages/ui/src/components/loader/loader.test.tsx
new file mode 100644
index 00000000..d328767c
--- /dev/null
+++ b/packages/ui/src/components/loader/loader.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import Loader from "./loader";
+
+// Test case for basic rendering and text
+test("Renders the Loader component correctly", () => {
+  render(<Loader />);
+  const loader = screen.getByTestId("loader");
+  expect(loader).toBeInTheDocument();
+  expect(loader).toHaveTextContent("Loading...");
+});
+
+// Test case for styling props
+test("Renders loader with custom background color", () => {
+  render(<Loader backgroundColor="amber-500" />);
+  const loader = screen.getByTestId("loader");
+  expect(loader).toHaveStyle({ backgroundColor: "rgb(245 158 11)" });
+});
+
+test("Renders loader with custom height", () => {
+  render(<Loader height="40" />);
+  const loader = screen.getByTestId("loader");
+  expect(loader).toHaveClass("h-40");
+});
diff --git a/packages/ui/src/components/loader/loader.tsx b/packages/ui/src/components/loader/loader.tsx
index d8d2e918..5aad9ad0 100644
--- a/packages/ui/src/components/loader/loader.tsx
+++ b/packages/ui/src/components/loader/loader.tsx
@@ -16,7 +16,7 @@ const Loader: React.FC<LoaderProps> = ({
   backgroundColor = "gray-100",
 }) => {
   return (
-    <div className={`bg-${backgroundColor} h-${height} w-${width} flex flex-col items-center justify-center`}>
+    <div data-testid="loader" className={`bg-${backgroundColor} h-${height} w-${width} flex flex-col items-center justify-center`}>
       <svg
         className={`-ml-1 mb-2 mr-3 h-${spinnerSize} w-${spinnerSize} animate-spin text-white`}
         xmlns="http://www.w3.org/2000/svg"

From f6c9058c20e0444909d499a37293644c0d92f960 Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Tue, 27 Feb 2024 10:11:08 -0800
Subject: [PATCH 3/7] Documented Loader component using JSDoc

---
 packages/ui/src/components/loader/loader.tsx | 25 +++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/loader/loader.tsx b/packages/ui/src/components/loader/loader.tsx
index 5aad9ad0..ab820ac8 100644
--- a/packages/ui/src/components/loader/loader.tsx
+++ b/packages/ui/src/components/loader/loader.tsx
@@ -8,15 +8,38 @@ interface LoaderProps {
 }
 
 const Loader: React.FC<LoaderProps> = ({
+  /**
+   * The height and width of the loader, using Tailwind CSS sizing classes.
+   * @default 'h-16' height: 4rem; (64px)
+   * @default 'w-16' width: 4rem; (64px)
+   */
   height = "16",
   width = "16",
+  /**
+   * The color of the text within the loader, using a Tailwind CSS color class.
+   * @default 'text-blue-500' color: rgb(59 130 246);
+   */
   textColor = "blue-500",
+  /**
+   * The color of the spinner within the loader.
+   * @default '#1d4ed8' branding color
+   */
   spinnerColor = "#1d4ed8",
+  /**
+   * The size of the spinner, using Tailwind CSS sizing classes.
+   * @default 'h-12 w-12' height: 3rem; width: 3rem; (48px)
+   */
   spinnerSize = "12",
+  /**
+   * The background color of the loader, using a Tailwind CSS color class.
+   * @default 'bg-gray-100' background-color: rgb(243 244 246);
+   */
   backgroundColor = "gray-100",
 }) => {
   return (
-    <div data-testid="loader" className={`bg-${backgroundColor} h-${height} w-${width} flex flex-col items-center justify-center`}>
+    <div
+      data-testid="loader"
+      className={`bg-${backgroundColor} h-${height} w-${width} flex flex-col items-center justify-center`}>
       <svg
         className={`-ml-1 mb-2 mr-3 h-${spinnerSize} w-${spinnerSize} animate-spin text-white`}
         xmlns="http://www.w3.org/2000/svg"

From bb63b6069f6c3e8d68e3ead392da0d284d7f2477 Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Mon, 26 Feb 2024 16:28:16 -0800
Subject: [PATCH 4/7] Created Loader component and added fallback loader for
 citation-data-insights

---
 packages/ui/src/components/loader/index.ts    |  1 +
 packages/ui/src/components/loader/loader.tsx  | 37 +++++++++++++++++++
 .../citation/ui/citation-data-insights.tsx    | 11 ++++--
 3 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 packages/ui/src/components/loader/index.ts
 create mode 100644 packages/ui/src/components/loader/loader.tsx

diff --git a/packages/ui/src/components/loader/index.ts b/packages/ui/src/components/loader/index.ts
new file mode 100644
index 00000000..537ea6ba
--- /dev/null
+++ b/packages/ui/src/components/loader/index.ts
@@ -0,0 +1 @@
+export { default } from "./loader";
diff --git a/packages/ui/src/components/loader/loader.tsx b/packages/ui/src/components/loader/loader.tsx
new file mode 100644
index 00000000..d8d2e918
--- /dev/null
+++ b/packages/ui/src/components/loader/loader.tsx
@@ -0,0 +1,37 @@
+interface LoaderProps {
+  height?: string;
+  width?: string;
+  textColor?: string;
+  spinnerColor?: string;
+  spinnerSize?: string;
+  backgroundColor?: string;
+}
+
+const Loader: React.FC<LoaderProps> = ({
+  height = "16",
+  width = "16",
+  textColor = "blue-500",
+  spinnerColor = "#1d4ed8",
+  spinnerSize = "12",
+  backgroundColor = "gray-100",
+}) => {
+  return (
+    <div className={`bg-${backgroundColor} h-${height} w-${width} flex flex-col items-center justify-center`}>
+      <svg
+        className={`-ml-1 mb-2 mr-3 h-${spinnerSize} w-${spinnerSize} animate-spin text-white`}
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24">
+        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+        <path
+          className="opacity-75"
+          fill={spinnerColor}
+          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+      </svg>
+
+      <p className={`text-${textColor} font-medium`}>Loading...</p>
+    </div>
+  );
+};
+
+export default Loader;
diff --git a/packages/website/src/features/citation/ui/citation-data-insights.tsx b/packages/website/src/features/citation/ui/citation-data-insights.tsx
index 8dab6026..c1b4b337 100644
--- a/packages/website/src/features/citation/ui/citation-data-insights.tsx
+++ b/packages/website/src/features/citation/ui/citation-data-insights.tsx
@@ -1,5 +1,6 @@
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
-import { VisualizationStub } from "@/shared/ui/visualization";
+import React, { Suspense } from "react";
+import Loader from "@lucky-parking/ui/src/components/loader";
 
 interface CitationDataset {
   name?: string;
@@ -15,6 +16,8 @@ interface CitationDataInsightsProps {
   title: string;
 }
 
+const LazyVisualizationStub = React.lazy(() => import("@/shared/ui/visualization/visualization-stub"));
+
 export default function CitationDataInsights(props: CitationDataInsightsProps) {
   const { category, datasets, dates, onClick, stat, title } = props;
 
@@ -35,8 +38,10 @@ export default function CitationDataInsights(props: CitationDataInsightsProps) {
       {datasets.map(({ name, data }, index) => (
         <div className="flex flex-col" key={name || `${title}-${index}`}>
           {name && <p className="paragraph-3 text-center font-semibold">{name}</p>}
-          {/*// @ts-ignore*/}
-          <VisualizationStub data={data} />
+          <Suspense fallback={<Loader height="64" width="full" />}>
+            {/*// @ts-ignore*/}
+            <LazyVisualizationStub data={data} />
+          </Suspense>
         </div>
       ))}
 

From c1f68164732b0eba73973a2fa681dea0719b7ec4 Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Mon, 26 Feb 2024 17:32:58 -0800
Subject: [PATCH 5/7] Added tests for the Loader component

---
 .../ui/src/components/loader/loader.test.tsx  | 23 +++++++++++++++++++
 packages/ui/src/components/loader/loader.tsx  |  2 +-
 2 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/components/loader/loader.test.tsx

diff --git a/packages/ui/src/components/loader/loader.test.tsx b/packages/ui/src/components/loader/loader.test.tsx
new file mode 100644
index 00000000..d328767c
--- /dev/null
+++ b/packages/ui/src/components/loader/loader.test.tsx
@@ -0,0 +1,23 @@
+import { render, screen } from "@testing-library/react";
+import Loader from "./loader";
+
+// Test case for basic rendering and text
+test("Renders the Loader component correctly", () => {
+  render(<Loader />);
+  const loader = screen.getByTestId("loader");
+  expect(loader).toBeInTheDocument();
+  expect(loader).toHaveTextContent("Loading...");
+});
+
+// Test case for styling props
+test("Renders loader with custom background color", () => {
+  render(<Loader backgroundColor="amber-500" />);
+  const loader = screen.getByTestId("loader");
+  expect(loader).toHaveStyle({ backgroundColor: "rgb(245 158 11)" });
+});
+
+test("Renders loader with custom height", () => {
+  render(<Loader height="40" />);
+  const loader = screen.getByTestId("loader");
+  expect(loader).toHaveClass("h-40");
+});
diff --git a/packages/ui/src/components/loader/loader.tsx b/packages/ui/src/components/loader/loader.tsx
index d8d2e918..5aad9ad0 100644
--- a/packages/ui/src/components/loader/loader.tsx
+++ b/packages/ui/src/components/loader/loader.tsx
@@ -16,7 +16,7 @@ const Loader: React.FC<LoaderProps> = ({
   backgroundColor = "gray-100",
 }) => {
   return (
-    <div className={`bg-${backgroundColor} h-${height} w-${width} flex flex-col items-center justify-center`}>
+    <div data-testid="loader" className={`bg-${backgroundColor} h-${height} w-${width} flex flex-col items-center justify-center`}>
       <svg
         className={`-ml-1 mb-2 mr-3 h-${spinnerSize} w-${spinnerSize} animate-spin text-white`}
         xmlns="http://www.w3.org/2000/svg"

From 6d28c73db5824b86b32f757aba3efc67253b51c7 Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Tue, 27 Feb 2024 10:11:08 -0800
Subject: [PATCH 6/7] Documented Loader component using JSDoc

---
 packages/ui/src/components/loader/loader.tsx | 25 +++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/loader/loader.tsx b/packages/ui/src/components/loader/loader.tsx
index 5aad9ad0..ab820ac8 100644
--- a/packages/ui/src/components/loader/loader.tsx
+++ b/packages/ui/src/components/loader/loader.tsx
@@ -8,15 +8,38 @@ interface LoaderProps {
 }
 
 const Loader: React.FC<LoaderProps> = ({
+  /**
+   * The height and width of the loader, using Tailwind CSS sizing classes.
+   * @default 'h-16' height: 4rem; (64px)
+   * @default 'w-16' width: 4rem; (64px)
+   */
   height = "16",
   width = "16",
+  /**
+   * The color of the text within the loader, using a Tailwind CSS color class.
+   * @default 'text-blue-500' color: rgb(59 130 246);
+   */
   textColor = "blue-500",
+  /**
+   * The color of the spinner within the loader.
+   * @default '#1d4ed8' branding color
+   */
   spinnerColor = "#1d4ed8",
+  /**
+   * The size of the spinner, using Tailwind CSS sizing classes.
+   * @default 'h-12 w-12' height: 3rem; width: 3rem; (48px)
+   */
   spinnerSize = "12",
+  /**
+   * The background color of the loader, using a Tailwind CSS color class.
+   * @default 'bg-gray-100' background-color: rgb(243 244 246);
+   */
   backgroundColor = "gray-100",
 }) => {
   return (
-    <div data-testid="loader" className={`bg-${backgroundColor} h-${height} w-${width} flex flex-col items-center justify-center`}>
+    <div
+      data-testid="loader"
+      className={`bg-${backgroundColor} h-${height} w-${width} flex flex-col items-center justify-center`}>
       <svg
         className={`-ml-1 mb-2 mr-3 h-${spinnerSize} w-${spinnerSize} animate-spin text-white`}
         xmlns="http://www.w3.org/2000/svg"

From 823c1ee1bd002e95b62cb2fc7a42dd9d4add3089 Mon Sep 17 00:00:00 2001
From: bzzz-coding <86077274+bzzz-coding@users.noreply.github.com>
Date: Wed, 20 Mar 2024 17:55:15 -0700
Subject: [PATCH 7/7] Added link to home page to Logo

---
 .../src/entities/branding/ui/logo.test.tsx      | 17 +++++++++++++++++
 .../website/src/entities/branding/ui/logo.tsx   |  9 +++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 packages/website/src/entities/branding/ui/logo.test.tsx

diff --git a/packages/website/src/entities/branding/ui/logo.test.tsx b/packages/website/src/entities/branding/ui/logo.test.tsx
new file mode 100644
index 00000000..3968b707
--- /dev/null
+++ b/packages/website/src/entities/branding/ui/logo.test.tsx
@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import Logo from "./logo";
+
+test("clicking on the logo redirects to the home page", async () => {
+  render(
+    <MemoryRouter>
+      <Logo />
+    </MemoryRouter>,
+  );
+
+  const logo = screen.getByTestId("logo");
+  userEvent.click(logo);
+
+  expect(window.location.pathname).toBe("/");
+});
diff --git a/packages/website/src/entities/branding/ui/logo.tsx b/packages/website/src/entities/branding/ui/logo.tsx
index 476f87a5..b1781061 100644
--- a/packages/website/src/entities/branding/ui/logo.tsx
+++ b/packages/website/src/entities/branding/ui/logo.tsx
@@ -1,14 +1,19 @@
 import BrandMark from "./brandmark.svg";
+import { Link } from "react-router-dom";
 
 export default function Logo() {
   return (
-    <div className="flex items-center space-x-2">
+    /**
+     * reloadDocument - A property used in the Link component from React Router to skip client side routing and let the browser handle the transition normally (as if it were an <a href>).
+     * @typedef {boolean} reloadDocument
+     */
+    <Link to="/" reloadDocument={false} data-testid="logo" className="flex items-center space-x-2">
       <img src={BrandMark} alt="Parking Insights brand mark" />
 
       <div className="select-none -space-y-1 font-semibold uppercase text-blue-600">
         <p>Parking</p>
         <p>Insights</p>
       </div>
-    </div>
+    </Link>
   );
 }