[jules] enhance: Add skeleton loading to mobile Home screen#298
[jules] enhance: Add skeleton loading to mobile Home screen#298
Conversation
Creates reusable Skeleton and GroupListSkeleton components for the React Native App. Replaces the default ActivityIndicator on the Home screen and refactors the Friends screen to use the generic Skeleton instead of hardcoded Views. 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 UI system for the mobile app. New generic Skeleton and GroupListSkeleton components are created, replacing previous ActivityIndicator and Animated-based loading visuals. HomeScreen and FriendsScreen are updated to use these new components, and project documentation is updated with changelog and development workflow notes. 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. Tip Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs). 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 #298 +/- ##
=======================================
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: 3
🤖 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/changelog.md:
- Around line 127-130: The "### 2026-03-08" entry is nested under the earlier
"## [2026-01-01] - Initial Setup" section and lacks proper spacing; change the
heading "### 2026-03-08" to a top-level dated section (use "## 2026-03-08" or
the same format as other top-level dated headings) and ensure there is a blank
line immediately after that heading, and move the three bullet lines so they are
outside and below the initial setup section to form a standalone dated changelog
entry.
In @.Jules/knowledge.md:
- Around line 760-763: The Markdown heading "### Development Workflows"
currently has no blank line before the list which triggers markdownlint MD022;
insert a single blank line immediately after the "### Development Workflows"
heading so the subsequent bulleted list is separated from the heading (update
the block around the heading in .Jules/knowledge.md where "### Development
Workflows" appears).
In `@mobile/components/skeletons/GroupListSkeleton.js`:
- Around line 15-16: Remove the Skeleton from the Card.Title title prop
(currently using <Card.Title title={<Skeleton ... />}>), because title is
rendered inside a Text and cannot contain a View; instead move the Skeleton into
Card.Title's left or right render prop (use Card.Title's left={props =>
<Skeleton ... />} or right={...}) or replace Card.Title with a custom header row
component outside of Card.Title that composes a Text for the title and a
Skeleton View for the placeholder; update the GroupListSkeleton component to
render the Skeleton via the left/right callback or a custom header so no
Animated/View is passed into the title prop.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 259bb953-a769-4cd3-bc54-bc262a6f7008
📒 Files selected for processing (7)
.Jules/changelog.md.Jules/knowledge.md.Jules/todo.mdmobile/components/skeletons/GroupListSkeleton.jsmobile/components/ui/Skeleton.jsmobile/screens/FriendsScreen.jsmobile/screens/HomeScreen.js
| ### 2026-03-08 | ||
| - Added generic `Skeleton` component and `GroupListSkeleton` component to mobile app | ||
| - Replaced basic ActivityIndicator loading screen with `GroupListSkeleton` on mobile `HomeScreen` | ||
| - Refactored `FriendsScreen` inline skeleton logic to use the new generic `Skeleton` component |
There was a problem hiding this comment.
Make this a standalone dated changelog section.
This March 8 entry is currently nested under ## [2026-01-01] - Initial Setup, which makes the timeline misleading and also triggers the heading-spacing lint. It should be promoted to its own top-level dated section, with a blank line after the heading.
Suggested fix
-### 2026-03-08
+## [2026-03-08] - Mobile skeleton loading
+
- Added generic `Skeleton` component and `GroupListSkeleton` component to mobile app
- Replaced basic ActivityIndicator loading screen with `GroupListSkeleton` on mobile `HomeScreen`
- Refactored `FriendsScreen` inline skeleton logic to use the new generic `Skeleton` component📝 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.
| ### 2026-03-08 | |
| - Added generic `Skeleton` component and `GroupListSkeleton` component to mobile app | |
| - Replaced basic ActivityIndicator loading screen with `GroupListSkeleton` on mobile `HomeScreen` | |
| - Refactored `FriendsScreen` inline skeleton logic to use the new generic `Skeleton` component | |
| ## [2026-03-08] - Mobile skeleton loading | |
| - Added generic `Skeleton` component and `GroupListSkeleton` component to mobile app | |
| - Replaced basic ActivityIndicator loading screen with `GroupListSkeleton` on mobile `HomeScreen` | |
| - Refactored `FriendsScreen` inline skeleton logic to use the new generic `Skeleton` component |
🧰 Tools
🪛 markdownlint-cli2 (0.21.0)
[warning] 127-127: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.Jules/changelog.md around lines 127 - 130, The "### 2026-03-08" entry is
nested under the earlier "## [2026-01-01] - Initial Setup" section and lacks
proper spacing; change the heading "### 2026-03-08" to a top-level dated section
(use "## 2026-03-08" or the same format as other top-level dated headings) and
ensure there is a blank line immediately after that heading, and move the three
bullet lines so they are outside and below the initial setup section to form a
standalone dated changelog entry.
| ### Development Workflows | ||
| - The mobile project is configured with `react-native-web`. You can test it in a browser using `npx expo start --web`. | ||
| - Use `AsyncStorage` values (`auth_token`, `refresh_token`, `user_data`) directly into Playwright's `window.localStorage` to bypass login flows for Playwright testing via react-native-web. | ||
| - When creating files in new subdirectories inside `/mobile/`, use `mkdir -p` before the write operation to ensure the path exists. |
There was a problem hiding this comment.
Add a blank line below this heading.
markdownlint is right here: the new ### Development Workflows heading is immediately followed by a list, so this block currently violates MD022.
Suggested fix
### Development Workflows
+
- The mobile project is configured with `react-native-web`. You can test it in a browser using `npx expo start --web`.
- Use `AsyncStorage` values (`auth_token`, `refresh_token`, `user_data`) directly into Playwright's `window.localStorage` to bypass login flows for Playwright testing via react-native-web.
- When creating files in new subdirectories inside `/mobile/`, use `mkdir -p` before the write operation to ensure the path exists.📝 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.
| ### Development Workflows | |
| - The mobile project is configured with `react-native-web`. You can test it in a browser using `npx expo start --web`. | |
| - Use `AsyncStorage` values (`auth_token`, `refresh_token`, `user_data`) directly into Playwright's `window.localStorage` to bypass login flows for Playwright testing via react-native-web. | |
| - When creating files in new subdirectories inside `/mobile/`, use `mkdir -p` before the write operation to ensure the path exists. | |
| ### Development Workflows | |
| - The mobile project is configured with `react-native-web`. You can test it in a browser using `npx expo start --web`. | |
| - Use `AsyncStorage` values (`auth_token`, `refresh_token`, `user_data`) directly into Playwright's `window.localStorage` to bypass login flows for Playwright testing via react-native-web. | |
| - When creating files in new subdirectories inside `/mobile/`, use `mkdir -p` before the write operation to ensure the path exists. |
🧰 Tools
🪛 markdownlint-cli2 (0.21.0)
[warning] 760-760: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Below
(MD022, blanks-around-headings)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In @.Jules/knowledge.md around lines 760 - 763, The Markdown heading "###
Development Workflows" currently has no blank line before the list which
triggers markdownlint MD022; insert a single blank line immediately after the
"### Development Workflows" heading so the subsequent bulleted list is separated
from the heading (update the block around the heading in .Jules/knowledge.md
where "### Development Workflows" appears).
| <Card.Title | ||
| title={<Skeleton width={120} height={20} borderRadius={4} />} |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
In react-native-paper 5.14.5, how does Card.Titlerender thetitle prop, and when supplying a custom component instead of text should it be passed as a render function?
💡 Result:
In react-native-paper@5.14.5, Card.Title renders title as children of a text component:
- It picks
TitleComponent = theme.isV3 ? Text : Title, then renders:<TitleComponent ...>{title}</TitleComponent>(github.com)
Because title is placed inside Text/Title, it will only work with a string or <Text>-based node (anything that ultimately renders as React Native <Text>). Passing a component that renders a <View> (or contains one) will fail with the usual “<View> within <Text>” nesting error. (callstack.github.io)
For a “custom component” title:
- Do not pass a render function—
titleis not a render-prop; it’s aReact.ReactNoderendered directly as children. (callstack.github.io) - If you want custom layout (icon + text, multiple views, etc.), use
left/right(which are render callbacks) or build your own header row instead of relying ontitle. (callstack.github.io)
Citations:
- 1: https://github.com/callstack/react-native-paper/blob/v5.14.5/src/components/Card/CardTitle.tsx
- 2: https://callstack.github.io/react-native-paper/docs/components/Card/CardTitle/?utm_source=openai
- 3: https://callstack.github.io/react-native-paper/docs/components/Card/CardTitle/?utm_source=openai
- 4: https://callstack.github.io/react-native-paper/docs/components/Card/CardTitle/?utm_source=openai
Remove Skeleton from title; use left/right render props or build a custom header row instead.
Skeleton renders an Animated.View, but Card.Title's title prop is rendered directly as children of a Text component. Passing a view component here violates React Native's text nesting rules and causes a runtime error. The title prop does not accept render functions.
Use the left or right render callbacks (which accept functions) to place the Skeleton component, or build a custom header row outside of Card.Title if you need finer control over layout.
🤖 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 15 - 16,
Remove the Skeleton from the Card.Title title prop (currently using <Card.Title
title={<Skeleton ... />}>), because title is rendered inside a Text and cannot
contain a View; instead move the Skeleton into Card.Title's left or right render
prop (use Card.Title's left={props => <Skeleton ... />} or right={...}) or
replace Card.Title with a custom header row component outside of Card.Title that
composes a Text for the title and a Skeleton View for the placeholder; update
the GroupListSkeleton component to render the Skeleton via the left/right
callback or a custom header so no Animated/View is passed into the title prop.
1 participant
What does this change?
This change adds a comprehensive skeleton loading experience to the mobile app's
HomeScreento improve the perceived performance and provide a better UX. It also implements a genericSkeletoncomponent and refactors existing uses of inline loading states to utilize it.Core Changes
mobile/components/ui/Skeleton.js, a highly reusable component for generic loading states that utilizesAnimated.loopfor smooth pulsing.mobile/components/skeletons/GroupListSkeleton.jsto specifically match the layout of theHomeScreengroup cards.mobile/screens/HomeScreen.jsto render theGroupListSkeletonrather than a standard spinningActivityIndicatorwhile data is loading.mobile/screens/FriendsScreen.jsto remove its messy, inline, and duplicatedAnimatedskeleton logic and replace it with the new standardSkeletoncomponent imports.todo.md,changelog.mdandknowledge.mdfiles in the.Julesfolder.This satisfies the UX todo: "Complete skeleton loading for HomeScreen groups".
PR created automatically by Jules for task 5893515721313771645 started by @Devasy23
Summary by CodeRabbit
New Features
Refactor