feat: add loading skeleton for PersonalRecords

[Srishti-Gupta74]

Summary

Added loading skeleton states for PersonalRecords so users receive visual feedback while data is being fetched, matching the loading experience used in other dashboard widgets and reducing layout shifts.

Closes #206

Type of Change

• Bug fix
• New feature
• Documentation update
• Refactor / code cleanup

Changes Made

• Added pulse loading skeletons to PersonalRecords
• Updated skeleton structure to mirror actual loaded content
• Reduced placeholder cards from 5 to 3 to match expected stat rows
• Used existing Tailwind-based loading patterns for consistency
• Improved loading experience and reduced layout shifts

How to Test

Steps for the reviewer to verify this works:

1. Run the project locally using npm run dev
2. Open the dashboard and navigate to PersonalRecords
3. Trigger a loading state (initial load or refresh)
4. Verify that 3 animated skeleton rows appear while data loads
5. Confirm skeleton layout closely matches the loaded content

Screenshots (if UI change)

N/A

Checklist

• Linked issue in summary
• npm run lint passes locally
• No TypeScript errors (npm run type-check)
• Self-reviewed the diff
• Added/updated tests if applicable

[vercel]

Someone is attempting to deploy a commit to the PRIYANSHU DOSHI's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

GSSoC Label Checklist 🏷️

@Priyanshu-byte-coder — please apply the appropriate labels before merging:

Difficulty (pick one):

• level:beginner — 20 pts
• level:intermediate — 35 pts
• level:advanced — 55 pts
• level:critical — 80 pts

Quality (optional):

• quality:clean — ×1.2 multiplier
• quality:exceptional — ×1.5 multiplier

Validation (required to score):

• gssoc:approved — counts for points
• gssoc:invalid / gssoc:spam / gssoc:ai-slop — does not score

Type labels (type:*) are auto-detected from files and title. Review and adjust if needed.
Points formula: (difficulty × quality_multiplier) + type_bonus

[Priyanshu-byte-coder]

Two issues to fix:

1. Broken indentation — the skeleton JSX block is unindented (starts at column 0 instead of matching surrounding code). Please fix indentation to match the rest of the component.

2. Skeleton layout mismatch — the loaded content shows 5 cards in a grid-cols-5 layout but the new skeleton shows only 3 rows in a space-y-3 list. The skeleton should mirror the actual loaded layout to prevent layout shift. Please restore the 5-card grid skeleton (matching the 5 personal records displayed).

Also add EOF newline if missing.

[Srishti-Gupta74]

Thanks for the review @Priyanshu-byte-coder! I fixed the indentation issues, restored the skeleton to match the 5-card loaded layout to prevent layout shifts, and added the requested formatting adjustments. Kindly re-review it. Thank you!

[github-actions]

🎉 Merged! Thanks for contributing to DevTrack.

If the project has been useful to you, a ⭐ star on the repo is the easiest way to support it — it helps DevTrack get discovered by more developers.

Keep an eye on open issues for your next contribution!