[jules] ux: Add skeleton loading to mobile HomeScreen#293
[jules] ux: Add skeleton loading to mobile HomeScreen#293
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 pulsing skeleton loading UI for the HomeScreen group list. It creates a reusable Skeleton component with animated opacity transitions and a GroupListSkeleton component that renders five skeleton cards. The HomeScreen is updated to display GroupListSkeleton instead of ActivityIndicator during loading. 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 #293 +/- ##
=======================================
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/skeletons/GroupListSkeleton.js`:
- Around line 14-17: The Card.Title left callback currently uses hardcoded
dimensions for the avatar Skeleton; update the left prop in GroupListSkeleton
(the Card.Title left callback) to accept the { size } argument and pass that
size to the Skeleton (both width/height and borderRadius if appropriate) so the
skeleton avatar matches the Card.Title avatar sizing in react-native-paper v5.
ℹ️ 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
| <Card.Title | ||
| title={<Skeleton width={150} height={20} />} | ||
| left={() => <Skeleton width={40} height={40} borderRadius={20} />} | ||
| /> |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
react-native-paper Card.Title left callback props style size v5
💡 Result:
In react-native-paper v5, Card.Title’s left prop is a callback that receives an object with a single field: size: number. You render your avatar/icon using that size (and optionally add your own styles). (oss.callstack.com)
Type
left?: (props: { size: number }) => React.ReactNode(oss.callstack.com)
Related styling props
leftStyle?: StyleProp<ViewStyle>– styles the left-element wrapper (oss.callstack.com)style?: StyleProp<ViewStyle>– styles theCard.Titlecontainer (oss.callstack.com)
Example
<Card.Title
title="Card Title"
left={({ size }) => (
<Avatar.Icon size={size} icon="folder" />
)}
leftStyle={{ marginRight: 8 }}
/>Citations:
- 1: https://oss.callstack.com/react-native-paper/docs/components/Card/CardTitle/?utm_source=openai
- 2: https://oss.callstack.com/react-native-paper/docs/components/Card/CardTitle/?utm_source=openai
- 3: https://oss.callstack.com/react-native-paper/docs/components/Card/CardTitle/?utm_source=openai
- 4: https://oss.callstack.com/react-native-paper/docs/components/Card/CardTitle/?utm_source=openai
- 5: https://oss.callstack.com/react-native-paper/docs/components/Card/CardTitle/?utm_source=openai
Use the provided size prop in the left callback for proper avatar alignment.
In react-native-paper v5, the Card.Title left callback receives only { size: number } and should use it to dimension the skeleton. The current code with hardcoded dimensions may misalign compared to real list items.
💡 Proposed fix
<Card.Title
title={<Skeleton width={150} height={20} />}
- left={() => <Skeleton width={40} height={40} borderRadius={20} />}
+ left={({ size }) => (
+ <Skeleton
+ width={size}
+ height={size}
+ borderRadius={size / 2}
+ />
+ )}
/>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Card.Title | |
| title={<Skeleton width={150} height={20} />} | |
| left={() => <Skeleton width={40} height={40} borderRadius={20} />} | |
| /> | |
| <Card.Title | |
| title={<Skeleton width={150} height={20} />} | |
| left={({ size }) => ( | |
| <Skeleton | |
| width={size} | |
| height={size} | |
| borderRadius={size / 2} | |
| /> | |
| )} | |
| /> |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@mobile/components/skeletons/GroupListSkeleton.js` around lines 14 - 17, The
Card.Title left callback currently uses hardcoded dimensions for the avatar
Skeleton; update the left prop in GroupListSkeleton (the Card.Title left
callback) to accept the { size } argument and pass that size to the Skeleton
(both width/height and borderRadius if appropriate) so the skeleton avatar
matches the Card.Title avatar sizing in react-native-paper v5.
1 participant
Implemented a complete skeleton loading system for the mobile HomeScreen to improve perceived performance.
Skeletoncomponent (mobile/components/ui/Skeleton.js) usingAnimatedfor a pulsing opacity effect, with support forreact-native-paperthemes.GroupListSkeleton(mobile/components/skeletons/GroupListSkeleton.js) that mimics the exact layout of the group list items (Avatar + Title + Subtitle).ActivityIndicatorinHomeScreen.jswithGroupListSkeleton..Jules/todo.mdand.Jules/changelog.mdto track this enhancement.PR created automatically by Jules for task 8108891635608244981 started by @Devasy23
Summary by CodeRabbit