feat: add skeleton loaders for loading states by quemsah · Pull Request #135 · quemsah/awesome-claude-plugins

quemsah · 2026-06-14T20:19:13Z

Summary

Replace loading spinners with skeleton loaders for better UX
Add Skeleton UI component with pulse animation
Add CardSkeleton component for plugin cards

Changes

Add Skeleton component with animate-pulse styling
Add CardSkeleton component for loading cards
Replace spinners with skeletons in RepoPage
Wrap plugin cards in article element for semantic HTML

Summary by CodeRabbit

UI Improvements
- Replaced loading spinners with skeleton screen placeholders for repository and plugins sections, providing a more polished and visually consistent loading experience with smooth animated placeholder cards.

- Add Skeleton UI component with pulse animation - Add CardSkeleton component for plugin cards - Replace spinners with skeletons in repo page for better UX

coderabbitai · 2026-06-14T20:19:23Z

📝 Walkthrough

Walkthrough

Adds a base Skeleton component and a composite CardSkeleton component, then replaces spinner/text loading placeholders in the repository page with CardSkeleton-based loading regions. Each PluginCard is now wrapped in a keyed <article> element.

Changes

Skeleton Loading UI

Layer / File(s)	Summary
Skeleton and CardSkeleton components `ui/src/components/ui/skeleton.tsx`, `ui/src/components/skeleton/CardSkeleton.tsx`	`Skeleton` renders an `aria-hidden` pulsing `div` with `cn`-merged classes. `CardSkeleton` accepts a `count` prop and renders that many placeholder `Card`/`CardContent` layouts composed of `Skeleton` elements.
Page loading states updated to CardSkeleton `ui/src/app/[...repo]/page.tsx`	Imports `CardSkeleton` and replaces the repo-loading and plugins-loading spinner/text UI with `CardSkeleton` inside accessible loading regions. Wraps each `PluginCard` in a keyed `<article>` element.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐇 Hop hop, the spinner's gone away,
Replaced by skeletons in neat array!
Each card a ghost, a pulse of grey,
While plugins load without delay.
✨ The rabbit cheers: a smoother day!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: introducing skeleton loaders for loading states, which is the primary focus of all changes across the three files.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ 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 feature/skeleton-loaders

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

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

gemini-code-assist

Code Review

This pull request introduces a new Skeleton component and a CardSkeleton component to display loading placeholders. The review feedback suggests removing redundant vertical padding in the CardSkeleton component to maintain symmetrical layout spacing, and adding aria-hidden="true" to the Skeleton component to improve accessibility for screen readers.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

gemini-code-assist · 2026-06-14T20:20:09Z

+    <>
+      {Array.from({ length: count }).map((_, index) => (
+        <Card className="w-full" key={index}>
+          <div className="flex flex-col gap-4 px-6 py-4">


The Card component already applies vertical padding (py-6) and a vertical gap (gap-4) between its children. Adding py-4 to the inner header div creates asymmetrical vertical spacing (top padding becomes py-6 + py-4, while bottom padding remains py-6).\n\nRemoving py-4 from this inner container will ensure a symmetrical layout that aligns with the standard Card component's spacing.

Suggested change

<div className="flex flex-col gap-4 px-6 py-4">

<div className="flex flex-col gap-4 px-6">

gemini-code-assist · 2026-06-14T20:20:09Z

+function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />
+}


To improve accessibility (a11y), skeleton screens should be hidden from screen readers using aria-hidden="true". This prevents assistive technologies from reading out empty layout blocks while the content is loading.

function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {\n return <div aria-hidden="true" className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />\n}

coderabbitai

🧹 Nitpick comments (1)

ui/src/app/[...repo]/page.tsx (1)

79-79: 💤 Low value

Remove unused text-center class.

The text-center class has no effect since CardSkeleton renders full-width Card elements using block/flex layouts. This appears to be leftover from the previous spinner implementation.

♻️ Proposed cleanup

-                  <div aria-busy="true" aria-live="polite" className="py-8 text-center">
+                  <div aria-busy="true" aria-live="polite" className="py-8">

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@ui/src/app/`[...repo]/page.tsx at line 79, Remove the unused text-center
class from the className attribute of the div element in the CardSkeleton
loading container. Since CardSkeleton renders full-width Card elements using
block/flex layouts, the text-center class has no effect and is leftover from a
previous implementation. Keep only the py-8 class in the className attribute.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@ui/src/app/`[...repo]/page.tsx:
- Line 79: Remove the unused text-center class from the className attribute of
the div element in the CardSkeleton loading container. Since CardSkeleton
renders full-width Card elements using block/flex layouts, the text-center class
has no effect and is leftover from a previous implementation. Keep only the py-8
class in the className attribute.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: afab714f-7ed2-4b11-95f4-15bc8df1a3f7

📥 Commits

Reviewing files that changed from the base of the PR and between 11833c7 and cf42e15.

📒 Files selected for processing (3)

ui/src/app/[...repo]/page.tsx
ui/src/components/skeleton/CardSkeleton.tsx
ui/src/components/ui/skeleton.tsx

feat: add skeleton loaders for loading states

4f571d2

- Add Skeleton UI component with pulse animation - Add CardSkeleton component for plugin cards - Replace spinners with skeletons in repo page for better UX

gemini-code-assist Bot reviewed Jun 14, 2026

View reviewed changes

fix: tighten skeleton loader semantics and path casing

cf42e15

coderabbitai Bot reviewed Jun 14, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add skeleton loaders for loading states#135

feat: add skeleton loaders for loading states#135
quemsah wants to merge 2 commits into
mainfrom
feature/skeleton-loaders

quemsah commented Jun 14, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Jun 14, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

gemini-code-assist Bot Jun 14, 2026

Uh oh!

gemini-code-assist Bot Jun 14, 2026

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	<div className="flex flex-col gap-4 px-6 py-4">
	<div className="flex flex-col gap-4 px-6">

Conversation

quemsah commented Jun 14, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Jun 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

❌ Failed checks (1 warning)

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist Bot Jun 14, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist Bot Jun 14, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

quemsah commented Jun 14, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Jun 14, 2026 •

edited

Loading