{{ message }}
[jules] enhance: Add skeleton loading state for HomeScreen groups#313
Open
Devasy wants to merge 1 commit into
Open
[jules] enhance: Add skeleton loading state for HomeScreen groups#313Devasy wants to merge 1 commit into
Devasy wants to merge 1 commit into
Conversation
- Created reusable `Skeleton` UI primitive with `Animated.loop`. - Created `GroupListSkeleton` to match actual group card layout. - Replaced generic `ActivityIndicator` in `HomeScreen` with skeleton loading. - Optimized accessibility by adding `accessibilityRole="progressbar"` to the skeleton container. Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>
Contributor
✅ Deploy Preview for split-but-wiser canceled.
|
Contributor
WalkthroughThis pull request implements mobile skeleton loading states by replacing the generic ActivityIndicator in HomeScreen with animated skeleton layouts. A reusable Skeleton primitive component and a GroupListSkeleton component are added, both with accessibility attributes to reduce layout shift and improve the loading experience. Changes
Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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 |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #313 +/- ##
=======================================
Coverage ? 74.43%
=======================================
Files ? 17
Lines ? 1635
Branches ? 144
=======================================
Hits ? 1217
Misses ? 367
Partials ? 51
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In @.Jules/todo.md:
- Around line 60-64: Remove the duplicated metadata block for the completed task
"- [x] **[ux]** Complete skeleton loading for HomeScreen groups" so only a
single canonical detail block remains; find the two overlapping detail sections
that list "Completed: 2026-04-04", "Files: `mobile/components/ui/Skeleton.js`,
`mobile/components/skeletons/GroupListSkeleton.js`,
`mobile/screens/HomeScreen.js`", "Context: Replaced ActivityIndicator with
pulsing skeleton group cards" and "Impact: Better loading experience, less
jarring", delete the redundant one and ensure the remaining block contains all
four metadata lines exactly once.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 2c0a808c-7077-44ad-93af-573d77eb02db
📒 Files selected for processing (5)
.Jules/changelog.md.Jules/todo.mdmobile/components/skeletons/GroupListSkeleton.jsmobile/components/ui/Skeleton.jsmobile/screens/HomeScreen.js
Comment on lines
+60
to
+64
Contributor
There was a problem hiding this comment.
Remove duplicated metadata for the completed task entry.
This task now has two overlapping detail blocks; keep a single canonical block to prevent future inconsistency.
🧹 Proposed cleanup
- [x] **[ux]** Complete skeleton loading for HomeScreen groups
- Completed: 2026-04-04
- Files: `mobile/components/ui/Skeleton.js`, `mobile/components/skeletons/GroupListSkeleton.js`, `mobile/screens/HomeScreen.js`
- Context: Replaced ActivityIndicator with pulsing skeleton group cards
- Impact: Better loading experience, less jarring
- - File: `mobile/screens/HomeScreen.js`
- - Context: Replace ActivityIndicator with skeleton group cards
- - Impact: Better loading experience, less jarring
- - Size: ~40 lines
- - Added: 2026-01-01🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.Jules/todo.md around lines 60 - 64, Remove the duplicated metadata block
for the completed task "- [x] **[ux]** Complete skeleton loading for HomeScreen
groups" so only a single canonical detail block remains; find the two
overlapping detail sections that list "Completed: 2026-04-04", "Files:
`mobile/components/ui/Skeleton.js`,
`mobile/components/skeletons/GroupListSkeleton.js`,
`mobile/screens/HomeScreen.js`", "Context: Replaced ActivityIndicator with
pulsing skeleton group cards" and "Impact: Better loading experience, less
jarring", delete the redundant one and ensure the remaining block contains all
four metadata lines exactly once.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Implemented a complete skeleton loading system for the
HomeScreengroups list in the mobile application. This replaces the generic full-screen activity indicator with an animated, structure-aware loading state that mimics the actual content layout, significantly reducing layout shift and improving perceived performance. The implementation includes a core pulsingSkeletoncomponent and a compositeGroupListSkeletonbuilt with React Native Paper cards. Accessibility has been considered by keeping noise minimal (via container-level ARIA roles instead of element-level).PR created automatically by Jules for task 3671660779610084956 started by @Devasy23
Summary by CodeRabbit
Release Notes