ECHO-381 Conversation loading skeleton addition#258
Conversation
- use "useSuspenseQuery" instead of "useQuery" for conversation - wrap "ConversationAccordian" in "Suspense" component to show skeleton until fully loaded
WalkthroughThis update introduces a skeleton loading state for the conversation accordion in the frontend. It adds new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ConversationAccordion
participant Suspense
participant ConversationSkeleton
participant ConversationAccordionMain
participant useSuspenseQuery
User->>ConversationAccordion: Render
ConversationAccordion->>Suspense: Wrap ConversationAccordionMain with fallback
alt Data not loaded
Suspense->>ConversationSkeleton: Render loading skeleton
else Data loaded
ConversationAccordionMain->>useSuspenseQuery: Fetch conversations (suspense)
useSuspenseQuery-->>ConversationAccordionMain: Return data
ConversationAccordionMain-->>User: Render accordion with data
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15 minutes Assessment against linked issues
Suggested labels
Suggested reviewers
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (14)
🧰 Additional context used🧠 Learnings (9)📓 Common learnings📚 Learning: in echo/frontend/src/components/participant/microphonetest.tsx, the usedisclosure hook is used where...Applied to files:
📚 Learning: in echo/frontend/src/components/report/createreportform.tsx, the conversation status section should ...Applied to files:
📚 Learning: react query devtools (@tanstack/react-query-devtools) are automatically excluded from production bun...Applied to files:
📚 Learning: react query devtools (@tanstack/react-query-devtools) are automatically excluded from production bun...Applied to files:
📚 Learning: .po files (gettext internationalization files) are auto-generated by i18n tools like @lingui/cli and...Applied to files:
📚 Learning: in the french localization file (fr-fr.po), "dembrane echo" is intentionally translated as "echo dem...Applied to files:
📚 Learning: when users indicate they have already addressed translation issues in locale files, verify the curre...Applied to files:
📚 Learning: in echo/frontend/src/app.tsx, user ussaama prefers explicit code over terse/inline code for react us...Applied to files:
🧬 Code Graph Analysis (2)echo/frontend/src/components/conversation/ConversationSkeleton.tsx (1)
echo/frontend/src/components/conversation/ConversationAccordion.tsx (1)
⏰ 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). (1)
🔇 Additional comments (18)
✨ 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. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
<!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Introduced a reusable skeleton loading component for consistent placeholder displays. * Added a conversation-specific skeleton loader for improved loading feedback in the conversation section. * **Refactor** * Updated the conversation accordion to support React Suspense, providing smoother asynchronous loading with skeleton placeholders. * **Bug Fixes** * Improved loading state handling in conversation data fetching for a more seamless user experience. * **Documentation** * Updated translation files to reflect new and adjusted UI elements, ensuring accurate localization metadata. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
2 participants
Summary by CodeRabbit
New Features
Refactor
Bug Fixes
Documentation