ECHO-381 Loading states for projects listing page#253
Conversation
- update loading skeleton for projects pagination - add loading skeleton for projects search
WalkthroughA new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ProjectsHome
participant ProjectListSkeleton
User->>ProjectsHome: Visits Projects Home
ProjectsHome->>ProjectsHome: Fetch project data (status: pending)
ProjectsHome->>ProjectListSkeleton: Render skeleton (view, searchValue, count)
ProjectListSkeleton-->>ProjectsHome: Skeleton UI rendered
ProjectsHome->>ProjectsHome: Fetch complete (status: success)
ProjectsHome->>User: Render project list or no projects message
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Suggested labels
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?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: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (2)
echo/frontend/src/components/project/ProjectListSkeleton.tsx(1 hunks)echo/frontend/src/routes/project/ProjectsHome.tsx(5 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: ussaama
PR: Dembrane/echo#205
File: echo/frontend/src/lib/query.ts:1444-1506
Timestamp: 2025-07-10T12:48:20.683Z
Learning: ussaama prefers string concatenation over template literals for simple cases where readability is clearer, even when linting tools suggest template literals. Human readability takes precedence over strict linting rules in straightforward concatenation scenarios.
Learnt from: ussaama
PR: Dembrane/echo#250
File: echo/frontend/src/components/form/MarkdownWYSIWYG/styles.css:1618-1624
Timestamp: 2025-07-29T11:36:23.638Z
Learning: ussaama prefers to keep CSS vendor prefixes and fallbacks without linter ignore comments, even when linters flag them as duplicate properties. Browser compatibility through progressive enhancement takes precedence over strict linting rules in their workflow.
echo/frontend/src/routes/project/ProjectsHome.tsx (2)
Learnt from: ussaama
PR: #224
File: echo/frontend/src/components/report/CreateReportForm.tsx:97-155
Timestamp: 2025-07-17T15:57:51.321Z
Learning: In echo/frontend/src/components/report/CreateReportForm.tsx, the conversation status section should only be displayed when there are pending conversations (conversationCounts.pending !== 0). When all conversations are processed, no status information should be shown to keep the UI minimal and clean.
Learnt from: ussaama
PR: #169
File: echo/frontend/src/components/project/ProjectPortalEditor.tsx:409-464
Timestamp: 2025-05-30T15:38:44.413Z
Learning: Badge-based selectors in ProjectPortalEditor.tsx: Keyboard navigation enhancements for accessibility are considered optional improvements rather than critical issues. The user acknowledges these suggestions but doesn't prioritize them as blockers.
⏰ 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). (2)
- GitHub Check: Cursor Bugbot
- GitHub Check: ci-check-server
🔇 Additional comments (6)
echo/frontend/src/components/project/ProjectListSkeleton.tsx (2)
30-33: LGTM! Smart early return pattern for pagination use case.Clean separation between wrapped and unwrapped rendering modes. The wrapper=false case for pagination is well-thought-out.
35-54: LGTM! Solid conditional rendering with proper layout structure.Good use of Mantine components and responsive grid classes. The conditional header skeleton when searchValue is empty is a nice touch for the initial load state.
echo/frontend/src/routes/project/ProjectsHome.tsx (4)
47-47: LGTM! Clean import addition.Proper relative import path for the new skeleton component.
187-197: LGTM! Smart status-based conditional rendering.Excellent improvement - welcome alert now only shows after successful fetch, preventing it from appearing during loading states. This aligns perfectly with the PR objectives.
223-230: LGTM! Consistent status-based messaging.Good pattern consistency - "no projects found" message also conditional on successful fetch status.
238-240: LGTM! Perfect loading state implementation.Clean integration of the skeleton component for initial loading. Props are well-chosen for this use case.
- add loading skeleton for projects initial loading state - update loading skeleton for projects pagination - add loading skeleton for projects search <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a unified skeleton loading component for project lists, providing consistent placeholder visuals for both grid and list views during data loading. * **Enhancements** * Improved loading experience by displaying skeleton placeholders while project data is being fetched. * Streamlined the appearance of loading indicators for infinite scrolling and initial load states. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
2 participants
Summary by CodeRabbit
New Features
Enhancements