[jules] enhance: Add skeleton loading state for HomeScreen groups#313
[jules] enhance: Add skeleton loading state for HomeScreen groups#313
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>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
✅ Deploy Preview for split-but-wiser canceled.
|
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}
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
| - [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 |
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.
1 participant
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