feat: implement inline shimmer skeleton loading states

[Rayan9064]

Summary by CodeRabbit

• UI Improvements
  • Replaced the dashboard’s full-page loading spinner with inline skeleton cards in the resource feed.
  • Added animated placeholders for resource titles, notes, tags, dates, and actions while content loads.
  • Improved the loading experience by keeping the rest of the dashboard visible during resource loading.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dumpit	Building	Preview, Comment	Jul 18, 2026 7:09pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d32be121-0739-44dd-8e0c-9870524cb482

📥 Commits

Reviewing files that changed from the base of the PR and between ee2ec9a and 61f2393.

📒 Files selected for processing (2)

• app/components/Dashboard.tsx
• app/components/ui/ResourceSkeleton.tsx

---

📝 Walkthrough

Walkthrough

The dashboard now keeps its surrounding layout visible while loading and displays animated resource-card skeletons inline in the feed. A new client-side ResourceSkeleton component provides the placeholder card structure and themed styling.

Changes

Dashboard loading experience

Layer / File(s)	Summary
Resource skeleton component app/components/ui/ResourceSkeleton.tsx	Adds a client-side animated placeholder card with status, title, note, collection, footer, and action areas.
Dashboard inline loading flow app/components/Dashboard.tsx	Removes the blocking spinner and renders a grid of ResourceSkeleton components while resources are loading.

Estimated code review effort: 2 (Simple) | ~10 minutes

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/skeleton-loading

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

app/components/Dashboard.tsx

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

app/components/ui/ResourceSkeleton.tsx

ESLint skipped: the ESLint configuration for this file references a package that is not available in the sandbox.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}