feat(admin): add loading skeleton for Collections page #450
Conversation
- Create CollectionsSkeleton component to display loading state - Integrate skeleton in admin Collections page during data fetching - Skeleton matches interface structure with header, list, and action buttons - Improves UX by providing visual feedback during loading
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughA new skeleton loading component is created and integrated into the collections admin page to display a placeholder UI during data loading, replacing previous loading blocks with a dedicated CollectionsSkeleton component. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. Comment |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Greptile SummaryThis PR adds a loading skeleton component for the Collections admin page, improving UX during data fetching. The new Confidence Score: 2/5
Important Files Changed
Sequence DiagramsequenceDiagram
participant User
participant Page as Collections Page
participant Hook as useAdminCollections Hook
participant API as API
User->>Page: Navigate to collections
Page->>Hook: Initialize hook with pagination
Hook->>API: Fetch collections (isLoading = true)
alt Data Loading
Page->>Page: Check isLoading state
Page->>Page: Return CollectionsSkeleton
Page->>User: Display skeleton with itemCount=10
Note over User: Sees placeholder UI with animations
end
API-->>Hook: Collections data received
Hook->>Hook: Update state (isLoading = false)
alt Data Loaded
Page->>Page: Check isLoading state
Page->>Page: Render actual collections list
Page->>User: Display collections with stats cards
end
User->>Page: Interact (create/edit/delete)
Page->>Hook: Call mutation (isSubmitting = true)
Hook->>API: Send request
API-->>Hook: Success/Error response
Hook->>Hook: Invalidate cache, update state
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
app/[locale]/admin/collections/page.tsxcomponents/admin/collections/collections-skeleton.tsx
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use Node.js >= 20.19.0
Files:
app/[locale]/admin/collections/page.tsxcomponents/admin/collections/collections-skeleton.tsx
app/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Routes and pages should be placed in app/[locale]/** and app/api/** directories following Next.js App Router conventions
Files:
app/[locale]/admin/collections/page.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Prefer TypeScript files over JavaScript
Run pnpm tsc --noEmit for TypeScript type-checking
Files:
app/[locale]/admin/collections/page.tsxcomponents/admin/collections/collections-skeleton.tsx
app/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use Next.js App Router under app/[locale]/** and app/api/**
Files:
app/[locale]/admin/collections/page.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Prefer TypeScript for all code
Files:
app/[locale]/admin/collections/page.tsxcomponents/admin/collections/collections-skeleton.tsx
**/*.{js,jsx,ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{js,jsx,ts,tsx}: Follow Prettier config with tabs, 4-space tabWidth, and 120-char printWidth
Prefer async/await over raw Promise chains in TypeScript/JavaScript code
Validate input with Zod where appropriate; follow existing schemas in lib/validations
Keep i18n-friendly: avoid hard-coded English strings in logic; use next-intl messages where relevant
Files:
app/[locale]/admin/collections/page.tsxcomponents/admin/collections/collections-skeleton.tsx
components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
components/**/*.{ts,tsx}: UI components should be placed in the components/** directory
Keep React components mostly presentational and lean, avoiding complex business logic
Files:
components/admin/collections/collections-skeleton.tsx
components/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Place UI and layout components in components/**
Files:
components/admin/collections/collections-skeleton.tsx
**/components/**/*.{jsx,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/components/**/*.{jsx,tsx}: For forms, prefer react-hook-form + Zod; follow patterns in existing auth/profile forms
Place business logic in lib/services or lib/repositories, not in components; keep components mostly presentational and data-fetching
Files:
components/admin/collections/collections-skeleton.tsx
🧬 Code graph analysis (1)
components/admin/collections/collections-skeleton.tsx (2)
components/ui/skeleton.tsx (1)
Skeleton(165-165)lib/editor/components/primitive/card/card.tsx (1)
CardBody(74-74)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Greptile Review
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Lint and Build
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (3)
components/admin/collections/collections-skeleton.tsx (1)
25-60: LGTM!The list rendering logic correctly generates skeleton items matching the expected page structure. Using
Array.fromwith an index key is appropriate for this static skeleton UI.app/[locale]/admin/collections/page.tsx (2)
11-11: LGTM!The import statement correctly references the new CollectionsSkeleton component using the project's path alias convention.
98-100: LGTM!The skeleton integration is well-implemented. The early return pattern is appropriate for loading states, and passing
PageSizeasitemCountensures the skeleton displays the same number of items as the actual loaded content, providing a consistent visual experience.
Add ARIA attributes to communicate loading state to assistive technologies. Screen readers will now announce when collections are loading. - Add role="status", aria-live="polite", and aria-busy="true" to wrapper - Add visually hidden "Loading collections…" text for screen readers - Add aria-hidden="true" to decorative skeleton containers
|
@Innocent-Akim very carefully resolve conflicts (or just recreate this PR again based on develop code) |
Summary
Related Issues
Description
Changes Made
Screenshots / Videos
Type of Change
Implementation Details
Testing Instructions
Deployment Notes
Checklist
Additional Context
Summary by cubic
Added a loading skeleton to the Admin Collections page to show a structured placeholder while data loads. Adds ARIA attributes so screen readers announce the loading state.
Written for commit 2061f0c. Summary will update on new commits.
Summary by CodeRabbit
Release Notes
✏️ Tip: You can customize this high-level summary in your review settings.