diff --git a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
index 6586c1c47..721e7346d 100644
--- a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx
+++ b/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") {
diff --git a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDaySkeleton.test.tsx b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDaySkeleton.test.tsx
new file mode 100644
index 000000000..355b1bcd8
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDaySkeleton.tsx b/js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDaySkeleton.tsx
new file mode 100644
index 000000000..f686ceae9
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/js/src/app/settings/Settings.page.tsx b/js/src/app/settings/Settings.page.tsx
index 84d3c4aa8..aa0879dcb 100644
--- a/js/src/app/settings/Settings.page.tsx
+++ b/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") {
diff --git a/js/src/app/settings/_components/SettingsSkeleton.test.tsx b/js/src/app/settings/_components/SettingsSkeleton.test.tsx
new file mode 100644
index 000000000..d4ec29bc6
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/js/src/app/settings/_components/SettingsSkeleton.tsx b/js/src/app/settings/_components/SettingsSkeleton.tsx
new file mode 100644
index 000000000..a58e79b09
--- /dev/null
+++ b/js/src/app/settings/_components/SettingsSkeleton.tsx
@@ -0,0 +1,135 @@
+import { Box, Card, Center, Flex, Skeleton, Stack } from "@mantine/core";
+
+export default function SettingsSkeleton() {
+  return (
+    <Box mih="90vh" p="lg">
+      <Box>
+        <Center>
+          <Skeleton
+            w="8rem"
+            h="2.5rem"
+            my="md"
+            data-testid="settings-skeleton-title"
+          />
+        </Center>
+        <Stack gap="xl">
+          <Card
+            withBorder
+            padding="md"
+            radius="md"
+            data-testid="settings-skeleton-verify-school-card"
+          >
+            <Box m="md">
+              <Skeleton
+                w="12rem"
+                h="3rem"
+                mb="xl"
+                ml="md"
+                data-testid="settings-skeleton-verify-school-title"
+              />
+              <Skeleton
+                w="40%"
+                h="1.25rem"
+                mb="md"
+                ml="md"
+                data-testid="settings-skeleton-verify-school-description-1"
+              />
+              <Skeleton
+                w="9rem"
+                h="1.25rem"
+                mb="md"
+                ml="md"
+                data-testid="settings-skeleton-verify-school-description-2"
+              />
+              <Flex direction="column" gap="xs" mb="lg" ml="md">
+                {Array(9)
+                  .fill(0)
+                  .map((_, index) => (
+                    <Skeleton
+                      key={index}
+                      w="12rem"
+                      h="1.5rem"
+                      data-testid="settings-skeleton-verify-school-list"
+                    />
+                  ))}
+              </Flex>
+              <Skeleton
+                w="6rem"
+                h="2.25rem"
+                ml="md"
+                radius="md"
+                data-testid="settings-skeleton-verify-now-button"
+              />
+            </Box>
+          </Card>
+          <Card
+            withBorder
+            padding="md"
+            radius="md"
+            data-testid="settings-skeleton-change-profile-card"
+          >
+            <Box m="md">
+              <Skeleton
+                w="22rem"
+                h="2.5rem"
+                mb="lg"
+                ml="md"
+                data-testid="settings-skeleton-change-profile-title"
+              />
+              <Skeleton
+                w="35%"
+                h="1.25rem"
+                mb="md"
+                ml="md"
+                data-testid="settings-skeleton-change-profile-description-1"
+              />
+              <Skeleton
+                w="45%"
+                h="1.25rem"
+                mb="md"
+                ml="md"
+                data-testid="settings-skeleton-change-profile-description-2"
+              />
+              <Skeleton
+                w="50%"
+                h="1.25rem"
+                ml="md"
+                data-testid="settings-skeleton-change-profile-description-3"
+              />
+            </Box>
+          </Card>
+          <Card
+            withBorder
+            padding="md"
+            radius="md"
+            data-testid="settings-skeleton-log-out-card"
+          >
+            <Box m="md">
+              <Skeleton
+                w="20rem"
+                h="2.5rem"
+                mb="lg"
+                ml="md"
+                data-testid="settings-skeleton-log-out-title"
+              />
+              <Skeleton
+                w="55%"
+                h="1.25rem"
+                mb="md"
+                ml="md"
+                data-testid="settings-skeleton-log-out-description"
+              />
+              <Skeleton
+                w="12rem"
+                h="2rem"
+                ml="md"
+                radius="md"
+                data-testid="settings-skeleton-log-out-all-sessions-button"
+              />
+            </Box>
+          </Card>
+        </Stack>
+      </Box>
+    </Box>
+  );
+}
diff --git a/js/src/app/submission/[submissionId]/_components/SubmissionDetailsContent.tsx b/js/src/app/submission/[submissionId]/_components/SubmissionDetailsContent.tsx
index 76a166f2f..2310366d5 100644
--- a/js/src/app/submission/[submissionId]/_components/SubmissionDetailsContent.tsx
+++ b/js/src/app/submission/[submissionId]/_components/SubmissionDetailsContent.tsx
@@ -1,4 +1,5 @@
 import classes from "@/app/submission/[submissionId]/_components/SubmissionDetailsContent.module.css";
+import SubmissionDetailsContentSkeleton from "@/app/submission/[submissionId]/_components/SubmissionDetailsContentSkeleton";
 import DocumentDescription from "@/components/ui/title/DocumentDescription";
 import DocumentTitle from "@/components/ui/title/DocumentTitle";
 import Toast from "@/components/ui/toast/Toast";
@@ -12,7 +13,6 @@ import {
   Card,
   Center,
   Flex,
-  Loader,
   Text,
   Title,
 } from "@mantine/core";
@@ -32,11 +32,7 @@ export default function SubmissionDetailsContent({
   const { data, status } = useSubmissionDetailsQuery({ submissionId });
 
   if (status === "pending") {
-    return (
-      <div className="flex flex-col items-center justify-center w-screen h-screen">
-        <Loader />
-      </div>
-    );
+    return <SubmissionDetailsContentSkeleton />;
   }
 
   if (status === "error") {
diff --git a/js/src/app/submission/[submissionId]/_components/SubmissionDetailsContentSkeleton.test.tsx b/js/src/app/submission/[submissionId]/_components/SubmissionDetailsContentSkeleton.test.tsx
new file mode 100644
index 000000000..30f906e7c
--- /dev/null
+++ b/js/src/app/submission/[submissionId]/_components/SubmissionDetailsContentSkeleton.test.tsx
@@ -0,0 +1,75 @@
+import SubmissionDetailsContentSkeleton from "@/app/submission/[submissionId]/_components/SubmissionDetailsContentSkeleton";
+import { TestUtils, TestUtilTypes } from "@/lib/test";
+import { screen } from "@testing-library/react";
+
+describe("SubmissionDetailsContentSkeleton", () => {
+  let renderProviderFn: TestUtilTypes.RenderWithAllProvidersFn | null = null;
+
+  beforeEach(() => {
+    renderProviderFn = TestUtils.getRenderWithAllProvidersFn();
+  });
+
+  it("should render question title skeleton", () => {
+    renderProviderFn?.(<SubmissionDetailsContentSkeleton />);
+    const element = screen.getByTestId("submission-skeleton-question-title");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render question link button skeleton", () => {
+    renderProviderFn?.(<SubmissionDetailsContentSkeleton />);
+    const element = screen.getByTestId(
+      "submission-skeleton-question-link-button",
+    );
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render question solved by skeleton", () => {
+    renderProviderFn?.(<SubmissionDetailsContentSkeleton />);
+    const element = screen.getByTestId(
+      "submission-skeleton-question-solved-by",
+    );
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render question information skeletons", () => {
+    renderProviderFn?.(<SubmissionDetailsContentSkeleton />);
+    const info1 = screen.getByTestId("submission-skeleton-question-points");
+    const info2 = screen.getByTestId("submission-skeleton-question-difficulty");
+    const info3 = screen.getByTestId(
+      "submission-skeleton-question-acceptance-rate",
+    );
+
+    expect(info1).toBeInTheDocument();
+    expect(info1).toBeVisible();
+    expect(info2).toBeInTheDocument();
+    expect(info2).toBeVisible();
+    expect(info3).toBeInTheDocument();
+    expect(info3).toBeVisible();
+  });
+
+  it("should render user profile button skeleton", () => {
+    renderProviderFn?.(<SubmissionDetailsContentSkeleton />);
+    const element = screen.getByTestId(
+      "submission-skeleton-user-profile-button",
+    );
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render question details skeleton", () => {
+    renderProviderFn?.(<SubmissionDetailsContentSkeleton />);
+    const element = screen.getByTestId("submission-skeleton-question-details");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+
+  it("should render user solution skeleton", () => {
+    renderProviderFn?.(<SubmissionDetailsContentSkeleton />);
+    const element = screen.getByTestId("submission-skeleton-user-solution");
+    expect(element).toBeInTheDocument();
+    expect(element).toBeVisible();
+  });
+});
diff --git a/js/src/app/submission/[submissionId]/_components/SubmissionDetailsContentSkeleton.tsx b/js/src/app/submission/[submissionId]/_components/SubmissionDetailsContentSkeleton.tsx
new file mode 100644
index 000000000..d891933e4
--- /dev/null
+++ b/js/src/app/submission/[submissionId]/_components/SubmissionDetailsContentSkeleton.tsx
@@ -0,0 +1,94 @@
+import { Box, Card, Center, Flex, Skeleton } from "@mantine/core";
+
+export default function SubmissionDetailsContentSkeleton() {
+  return (
+    <Box p="lg">
+      <Center>
+        <Flex align="center" gap="sm" mt="lg" mb="lg">
+          <Skeleton
+            w="20rem"
+            h="3rem"
+            data-testid="submission-skeleton-question-title"
+          />
+          <Skeleton
+            w="4rem"
+            h="3rem"
+            radius="md"
+            data-testid="submission-skeleton-question-link-button"
+          />
+        </Flex>
+      </Center>
+      <Box p={0}>
+        <Center>
+          <Flex align="center" gap="xs">
+            <Skeleton
+              w="24rem"
+              h="2.25rem"
+              data-testid="submission-skeleton-question-solved-by"
+            />
+          </Flex>
+        </Center>
+        <Center mt="xs">
+          <Skeleton
+            w="8rem"
+            h="1.75rem"
+            data-testid="submission-skeleton-question-points"
+          />
+        </Center>
+        <Center mt="xs">
+          <Skeleton
+            w="10rem"
+            h="1.75rem"
+            data-testid="submission-skeleton-question-difficulty"
+          />
+        </Center>
+        <Center mt="xs">
+          <Skeleton
+            w="14rem"
+            h="1.75rem"
+            data-testid="submission-skeleton-question-acceptance-rate"
+          />
+        </Center>
+        <Center mt="xs">
+          <Skeleton
+            w="10rem"
+            h="2.25rem"
+            radius="md"
+            data-testid="submission-skeleton-user-profile-button"
+          />
+        </Center>
+        <Card
+          shadow="xs"
+          padding="lg"
+          radius="lg"
+          mt="xl"
+          data-testid="submission-skeleton-question-details"
+        >
+          <Skeleton w="70%" h="1.25rem" mb="md" />
+          <Skeleton w="6rem" h="1.5rem" mb="sm" />
+          <Skeleton w="100%" h="10rem" mb="lg" />
+          <Skeleton w="6rem" h="1.5rem" mb="sm" />
+          <Skeleton w="100%" h="6rem" mb="lg" />
+          <Skeleton w="6rem" h="1.5rem" mb="sm" />
+          <Skeleton w="100%" h="4rem" mb="lg" />
+          <Skeleton w="10%" h="1.5rem" mb="xs" />
+          <Skeleton w="10%" h="1.5rem" />
+        </Card>
+        <Card
+          shadow="xs"
+          padding="lg"
+          radius="lg"
+          mt="xl"
+          data-testid="submission-skeleton-user-solution"
+        >
+          <Flex direction="column" gap="md" align="center" mb="lg">
+            <Skeleton w="10rem" h="3rem" />
+            <Skeleton w="6rem" h="1.5rem" />
+            <Skeleton w="6rem" h="1.5rem" />
+          </Flex>
+          <Skeleton w="100%" h="20rem" />
+        </Card>
+      </Box>
+    </Box>
+  );
+}