Conversation
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 introduces a skeleton loading feature for the HomeScreen group list. It adds a generic Skeleton component with pulsing animation, a GroupListSkeleton component that mirrors the HapticCard layout, and integrates both into HomeScreen to replace the existing activity indicator loading state. Changes
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 #294 +/- ##
=======================================
Coverage ? 63.55%
=======================================
Files ? 21
Lines ? 2456
Branches ? 254
=======================================
Hits ? 1561
Misses ? 831
Partials ? 64
🚀 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 `@mobile/components/ui/Skeleton.js`:
- Around line 30-37: The Skeleton component is announcing every instance as a
progressbar via the Animated.View accessibilityRole and accessibilityLabel;
change the primitive to be decorative by default by removing or disabling those
attributes and adding an explicit opt-in prop (e.g., a boolean prop like
announce or accessibleLabel/announceAccessibility) that, when provided/true,
sets accessibilityRole="progressbar" and accessibilityLabel to the given string.
Update the Animated.View usage in Skeleton.js to default to non-accessible
(accessible={false} or omit accessibility props) and wire the new prop so
callers (only when needed) can opt-in to screen-reader announcements; update
GroupListSkeleton renderers to not opt-in so the high-level "Loading groups"
remains the single announcement.
ℹ️ Review info
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (5)
.Jules/changelog.md.Jules/todo.mdmobile/components/skeletons/GroupListSkeleton.jsmobile/components/ui/Skeleton.jsmobile/screens/HomeScreen.js
| <Animated.View | ||
| style={[ | ||
| { opacity }, | ||
| style, | ||
| ]} | ||
| accessibilityRole="progressbar" | ||
| accessibilityLabel="Loading..." | ||
| > |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if files exist and examine the current Skeleton.js implementation
echo "=== Checking Skeleton.js ==="
if [ -f "mobile/components/ui/Skeleton.js" ]; then
cat -n mobile/components/ui/Skeleton.js
else
echo "File not found at mobile/components/ui/Skeleton.js"
# Try to find it
find . -name "Skeleton.js" -type f 2>/dev/null | head -10
fiRepository: Devasy/splitwiser
Length of output: 1817
🏁 Script executed:
#!/bin/bash
# Check GroupListSkeleton.js
echo "=== Checking GroupListSkeleton.js ==="
if [ -f "mobile/components/skeletons/GroupListSkeleton.js" ]; then
cat -n mobile/components/skeletons/GroupListSkeleton.js
else
echo "File not found at mobile/components/skeletons/GroupListSkeleton.js"
# Try to find it
find . -name "GroupListSkeleton.js" -type f 2>/dev/null | head -10
fiRepository: Devasy/splitwiser
Length of output: 2201
Do not announce each skeleton block as a progressbar.
Every Skeleton instance exposes itself as a separate progressbar with "Loading..." label via lines 35–36. In GroupListSkeleton.js, the renderItem() function creates 4 Skeleton instances per card (title, subtitle, avatar, status), which renders 5 times in a FlatList—resulting in 20 total progressbar announcements. This creates repetitive noise for screen-reader users and poor focus navigation, even though the container already has a high-level "Loading groups" announcement (line 30 of GroupListSkeleton).
Make this primitive decorative by default with accessibility opt-in only when needed.
Proposed fix
-const Skeleton = ({ width, height, borderRadius = 4, style }) => {
+const Skeleton = ({
+ width,
+ height,
+ borderRadius = 4,
+ style,
+ accessible = false,
+ accessibilityLabel,
+}) => {
@@
<Animated.View
+ accessible={accessible}
style={[
{ opacity },
style,
]}
- accessibilityRole="progressbar"
- accessibilityLabel="Loading..."
+ accessibilityRole={accessible ? "progressbar" : undefined}
+ accessibilityLabel={accessible ? (accessibilityLabel || "Loading") : undefined}
>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@mobile/components/ui/Skeleton.js` around lines 30 - 37, The Skeleton
component is announcing every instance as a progressbar via the Animated.View
accessibilityRole and accessibilityLabel; change the primitive to be decorative
by default by removing or disabling those attributes and adding an explicit
opt-in prop (e.g., a boolean prop like announce or
accessibleLabel/announceAccessibility) that, when provided/true, sets
accessibilityRole="progressbar" and accessibilityLabel to the given string.
Update the Animated.View usage in Skeleton.js to default to non-accessible
(accessible={false} or omit accessibility props) and wire the new prop so
callers (only when needed) can opt-in to screen-reader announcements; update
GroupListSkeleton renderers to not opt-in so the high-level "Loading groups"
remains the single announcement.
1 participant
Implemented a skeleton loading state for the mobile HomeScreen to improve perceived performance.
Changes:
mobile/components/ui/Skeleton.js: A generic pulsing skeleton primitive usingAnimatedandSurface.mobile/components/skeletons/GroupListSkeleton.js: A composite skeleton mimicking theHapticCardgroup list layout.GroupListSkeletonintomobile/screens/HomeScreen.js, replacing theActivityIndicator..Jules/todo.mdand.Jules/changelog.md.PR created automatically by Jules for task 16733077764637405702 started by @Devasy23
Summary by CodeRabbit