738: Added Setting, POTD & Submissions skeletons

js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx

@@ -1,32 +1,13 @@
+import ProblemOfTheDaySkeleton from "@/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDaySkeleton";
 import { useFetchPotdQuery } from "@/lib/api/queries/potd";
-import {
-  Badge,
-  Button,
-  Card,
-  Center,
-  Flex,
-  Loader,
-  Title,
-} from "@mantine/core";
+import { Badge, Button, Card, Center, Flex, Title } from "@mantine/core";
 import { Link } from "react-router-dom";
 
 export default function ProblemOfTheDay() {
   const { data, status } = useFetchPotdQuery();
 
   if (status === "pending") {
-    return (
-      <Card withBorder padding={"md"} radius={"md"} miw={"31vw"} mih={"63vh"}>
-        <Flex
-          direction={"row"}
-          justify={"center"}
-          align={"center"}
-          w={"100%"}
-          h={"100%"}
-        >
-          <Loader />
-        </Flex>
-      </Card>
-    );
+    return <ProblemOfTheDaySkeleton />;
   }
 
   if (status === "error") {

js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDaySkeleton.test.tsx

@@ -0,0 +1,46 @@
+import ProblemOfTheDaySkeleton from "@/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDaySkeleton";
+import { TestUtils, TestUtilTypes } from "@/lib/test";
+import { screen } from "@testing-library/react";
+
+describe("ProblemOfTheDaySkeleton", () => {
+  let renderProviderFn: TestUtilTypes.RenderWithAllProvidersFn | null = null;
+
+  beforeEach(() => {
+    renderProviderFn = TestUtils.getRenderWithAllProvidersFn();
+  });
+
+  it("should render POTD title skeleton", () => {
+    renderProviderFn?.(<ProblemOfTheDaySkeleton />);
+    const element = screen.getByTestId("potd-skeleton-title");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render POTD reset time skeleton", () => {
+    renderProviderFn?.(<ProblemOfTheDaySkeleton />);
+    const element = screen.getByTestId("potd-skeleton-reset-time");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render problem title skeleton", () => {
+    renderProviderFn?.(<ProblemOfTheDaySkeleton />);
+    const element = screen.getByTestId("potd-skeleton-problem-title");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render problem multiplier skeleton", () => {
+    renderProviderFn?.(<ProblemOfTheDaySkeleton />);
+    const element = screen.getByTestId("potd-skeleton-problem-multiplier");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render problem link button skeleton", () => {
+    renderProviderFn?.(<ProblemOfTheDaySkeleton />);
+    const element = screen.getByTestId("potd-skeleton-problem-link-button");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+});

js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDaySkeleton.tsx

@@ -0,0 +1,44 @@
+import { Card, Center, Flex, Skeleton } from "@mantine/core";
+
+export default function ProblemOfTheDaySkeleton() {
+  return (
+    <Card withBorder padding={"md"} radius={"md"} miw={"31vw"} mih={"63vh"}>
+      <Center mb={"xs"}>
+        <Skeleton w={"18rem"} h={"2.5rem"} data-testid="potd-skeleton-title" />
+      </Center>
+      <Center mb={"md"}>
+        <Skeleton
+          w={"13rem"}
+          h={"1.5rem"}
+          data-testid="potd-skeleton-reset-time"
+        />
+      </Center>
+      <Flex
+        direction={"column"}
+        gap={"sm"}
+        align={"center"}
+        justify={"center"}
+        w={"100%"}
+        h={"100%"}
+      >
+        <Skeleton
+          w={"60%"}
+          h={"2rem"}
+          data-testid="potd-skeleton-problem-title"
+        />
+        <Skeleton
+          w={"9rem"}
+          h={"1.50rem"}
+          radius={"xl"}
+          data-testid="potd-skeleton-problem-multiplier"
+        />
+        <Skeleton
+          w={"10rem"}
+          h={"2.25rem"}
+          radius={"md"}
+          data-testid="potd-skeleton-problem-link-button"
+        />
+      </Flex>
+    </Card>
+  );
+}

js/src/app/settings/Settings.page.tsx

@@ -1,13 +1,14 @@
 import ChangeImageSettingsCard from "@/app/settings/_components/ChangeImageSettingsCard";
 import LogoutAllSessionsCard from "@/app/settings/_components/LogoutAllSessionsCard";
 import SchoolVerifySettingsCard from "@/app/settings/_components/SchoolVerifySettingsCard";
+import SettingsSkeleton from "@/app/settings/_components/SettingsSkeleton";
 import DocumentDescription from "@/components/ui/title/DocumentDescription";
 import DocumentTitle from "@/components/ui/title/DocumentTitle";
 import Toast from "@/components/ui/toast/Toast";
 import ToastWithRedirect from "@/components/ui/toast/ToastWithRedirect";
 import { useAuthQuery } from "@/lib/api/queries/auth";
 import { useBackendCallbackParams } from "@/lib/hooks/useBackendCallbackParams";
-import { Box, Center, Loader, Stack, Title } from "@mantine/core";
+import { Box, Center, Stack, Title } from "@mantine/core";
 import { notifications } from "@mantine/notifications";
 import { useEffect } from "react";
 
@@ -25,11 +26,7 @@ export default function SettingsPage() {
   }, [message, success]);
 
   if (status === "pending") {
-    return (
-      <div className="flex flex-col items-center justify-center w-screen h-screen">
-        <Loader />
-      </div>
-    );
+    return <SettingsSkeleton />;
   }
 
   if (status === "error") {

js/src/app/settings/_components/SettingsSkeleton.test.tsx

@@ -0,0 +1,134 @@
+import SettingsSkeleton from "@/app/settings/_components/SettingsSkeleton";
+import { TestUtils, TestUtilTypes } from "@/lib/test";
+import { screen } from "@testing-library/react";
+
+describe("SettingsSkeleton", () => {
+  let renderProviderFn: TestUtilTypes.RenderWithAllProvidersFn | null = null;
+
+  beforeEach(() => {
+    renderProviderFn = TestUtils.getRenderWithAllProvidersFn();
+  });
+
+  it("should render title skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId("settings-skeleton-title");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render verify school card skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId("settings-skeleton-verify-school-card");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render verify school title skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId("settings-skeleton-verify-school-title");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render verify school description 1 skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId(
+      "settings-skeleton-verify-school-description-1",
+    );
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render verify school description 2 skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId(
+      "settings-skeleton-verify-school-description-2",
+    );
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render verify school list skeletons", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const elements = screen.queryAllByTestId(
+      "settings-skeleton-verify-school-list",
+    );
+    expect(elements).toHaveLength(9);
+    for (const element of elements) {
+      expect(element).toBeInTheDocument();
+      expect(element).toBeVisible();
+    }
+  });
+
+  it("should render verify now button skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId("settings-skeleton-verify-now-button");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render change profile card skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId("settings-skeleton-change-profile-card");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render change profile title skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId(
+      "settings-skeleton-change-profile-title",
+    );
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render change profile description skeletons", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const description1 = screen.getByTestId(
+      "settings-skeleton-change-profile-description-1",
+    );
+    const description2 = screen.getByTestId(
+      "settings-skeleton-change-profile-description-2",
+    );
+    const description3 = screen.getByTestId(
+      "settings-skeleton-change-profile-description-3",
+    );
+    expect(description1).toBeInTheDocument();
+    expect(description1).toBeVisible();
+    expect(description2).toBeInTheDocument();
+    expect(description2).toBeVisible();
+    expect(description3).toBeInTheDocument();
+    expect(description3).toBeVisible();
+  });
+
+  it("should render log out card skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId("settings-skeleton-log-out-card");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render log out title skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId("settings-skeleton-log-out-title");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render log out description skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId("settings-skeleton-log-out-description");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render log out all sessions button skeleton", () => {
+    renderProviderFn?.(<SettingsSkeleton />);
+    const element = screen.getByTestId(
+      "settings-skeleton-log-out-all-sessions-button",
+    );
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+});