feat(apps/web): Add loading and error states to pages

apps/web/src/app/applications/[address]/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC } from "react";
-import PageError from "../../components/pageError";
+import PageError from "../../../components/pageError";
 
 interface PageErrorProps {
     reset: () => void;

apps/web/src/app/applications/[address]/loading.tsx

@@ -1,4 +1,4 @@
-import PageLoader from "../../components/pageLoader";
+import PageLoader from "../../../components/pageLoader";
 
 export default function Loading() {
     return <PageLoader />;

apps/web/src/app/applications/error.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import type { FC } from "react";
-import PageError from "../components/pageError";
+import PageError from "../../components/pageError";
 
 interface PageErrorProps {
     reset: () => void;

apps/web/src/app/applications/loading.tsx

@@ -1,4 +1,4 @@
-import PageLoader from "../components/pageLoader";
+import PageLoader from "../../components/pageLoader";
 
 export default function Loading() {
     return <PageLoader />;

apps/web/src/app/error.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+import type { FC } from "react";
+import PageError from "../components/pageError";
+
+interface PageErrorProps {
+    reset: () => void;
+}
+
+const Error: FC<PageErrorProps> = ({ reset }) => <PageError reset={reset} />;
+
+export default Error;

apps/web/src/app/loading.tsx

@@ -0,0 +1,5 @@
+import PageLoader from "../components/pageLoader";
+
+export default function Loading() {
+    return <PageLoader />;
+}

apps/web/src/components/pageLoader.tsx

@@ -0,0 +1,16 @@
+import type { FC } from "react";
+import { Flex, Loader } from "@mantine/core";
+
+const PageLoader: FC = () => (
+    <Flex
+        w="100%"
+        h="100%"
+        justify="center"
+        align="center"
+        style={{ minHeight: "inherit" }}
+    >
+        <Loader data-testid="page-spinner" />
+    </Flex>
+);
+
+export default PageLoader;

apps/web/test/components/pageError.test.tsx

@@ -0,0 +1,32 @@
+import { describe, it } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { withMantineTheme } from "../utils/WithMantineTheme";
+import PageError from "../../src/components/pageError";
+
+const Component = withMantineTheme(PageError);
+const props = {
+    reset: () => undefined,
+};
+
+describe("PageError component", () => {
+    it("should display correct heading", () => {
+        render(<Component {...props} />);
+        expect(screen.getByText("Something went wrong!")).toBeInTheDocument();
+    });
+
+    it("should display correct button text", () => {
+        render(<Component {...props} />);
+        expect(screen.getByText("Try again")).toBeInTheDocument();
+    });
+
+    it("should invoke reset function when button is clicked", () => {
+        const mockedReset = vi.fn();
+        render(<Component reset={mockedReset} />);
+
+        const button = screen.getByText("Try again")
+            .parentElement as HTMLButtonElement;
+        fireEvent.click(button);
+
+        expect(mockedReset).toHaveBeenCalled();
+    });
+});

apps/web/test/components/pageLoader.test.tsx

@@ -0,0 +1,13 @@
+import { describe, it } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { withMantineTheme } from "../utils/WithMantineTheme";
+import PageLoader from "../../src/components/pageLoader";
+
+const Component = withMantineTheme(PageLoader);
+
+describe("PageLoader component", () => {
+    it("should display spinner", () => {
+        render(<Component />);
+        expect(screen.getByTestId("page-spinner")).toBeInTheDocument();
+    });
+});