738: Added Setting, POTD & Submissions skeletons

[az2924]

738

Description of changes

Checklist before review

• I have done a thorough self-review of the PR
• Copilot has reviewed my latest changes, and all comments have been fixed and/or closed.
• If I have made database changes, I have made sure I followed all the db repo rules listed in the wiki here. (check if no db changes)
• All tests have passed
• I have successfully deployed this PR to staging
• I have done manual QA in both dev (and staging if possible) and attached screenshots below.

Screenshots

Dev

Settings:

POTD:

Submissions:

Staging

POTD:

Settings:

Submissions:

[github-actions]

Available PR Commands

• /ai - Triggers all AI review commands at once
• /review - AI review of the PR changes
• /describe - AI-powered description of the PR
• /improve - AI-powered suggestions
• /deploy - Deploy to staging

See: https://github.com/tahminator/codebloom/wiki/CI-Commands

[az2924]

/deploy

[github-actions]

Title

738: Added skeleton to setting, POTD, and submissions

---

PR Type

Enhancement

---

Description

• Replace loading spinners with skeleton placeholders

• Add skeleton components for three pages

• Wire pending states to new skeletons

• Remove unused Mantine Loader imports

---

Diagram Walkthrough

flowchart LR
  potd["POTD pending state"] -- "Loader → Skeleton" --> potdSkel["ProblemOfTheDaySkeleton"]
  settings["Settings pending state"] -- "Loader → Skeleton" --> settingsSkel["SettingsSkeleton"]
  submission["Submission pending state"] -- "Loader → Skeleton" --> submissionSkel["SubmissionDetailsContentSkeleton"]

Loading

File Walkthrough

Relevant files

Enhancement

ProblemOfTheDay.tsx Replace POTD Loader with skeleton                                                js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDay.tsx Import ProblemOfTheDaySkeleton Replace pending state Loader with skeleton Remove Mantine Loader and centering layout +3/-22    ProblemOfTheDaySkeleton.tsx Add ProblemOfTheDay skeleton component                                      js/src/app/dashboard/_components/ProblemOfTheDay/ProblemOfTheDaySkeleton.tsx Add ProblemOfTheDaySkeleton component Structured card with multiple Skeleton placeholders Centers title, tags, and actions layout +26/-0    Settings.page.tsx Use settings skeleton during loading                                          js/src/app/settings/Settings.page.tsx Import SettingsSkeleton Use skeleton on pending instead of Loader Remove Mantine Loader import +3/-6      SettingsSkeleton.tsx Add settings page skeleton component                                          js/src/app/settings/_components/SettingsSkeleton.tsx Add SettingsSkeleton component Multi-card layout with Skeleton placeholders Mimics headings, text, lists, and buttons +45/-0    SubmissionDetailsContent.tsx Use submission details skeleton on loading                              js/src/app/submission/[submissionId]/_components/SubmissionDetailsContent.tsx Import SubmissionDetailsContentSkeleton Replace full-screen Loader with skeleton Remove Mantine Loader import +2/-6      SubmissionDetailsContentSkeleton.tsx Add submission details skeleton component                                js/src/app/submission/[submissionId]/_components/SubmissionDetailsContentSkeleton.tsx Add SubmissionDetailsContentSkeleton component Placeholders for headers, badges, actions, panels Large code/content area with Skeleton +44/-0

---

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Naming Consistency The default export function name does not match the file/import name, which can hinder readability and tooling (e.g., React DevTools). Consider renaming the function to SubmissionDetailsContentSkeleton for clarity. export default function SubmissionDetailsSkeleton() { Possible Unused Import Verify that Title from @mantine/core is used in this module; if not, remove it to satisfy lint rules and reduce bundle size. import { Box, Center, Stack, Title } from "@mantine/core";

[github-actions]

PR Code Suggestions ✨

No code suggestions found for the PR.

[az2924]

/deploy

[az2924]

/deploy