[jules] enhance: Complete skeleton loading for HomeScreen groups by Devasy · Pull Request #301 · Devasy/splitwiser

Devasy · 2026-03-14T19:49:24Z

Description

This pull request replaces the generic ActivityIndicator loading state on the mobile HomeScreen with a polished, accessible skeleton loading system. This enhancement provides a smoother user experience and reduces layout shift by mirroring the eventual layout of the group cards.

Changes

Created a generic, animated Skeleton component (mobile/components/ui/Skeleton.js) that uses Animated.loop for a continuous opacity-pulsing effect.
Created GroupListSkeleton (mobile/components/skeletons/GroupListSkeleton.js) using react-native-paper's Card structure to match the look of the actual group list items.
Updated mobile/screens/HomeScreen.js to render GroupListSkeleton while isLoading is true.
Included comprehensive accessibility support (accessible={true}, accessibilityRole="progressbar", accessibilityLabel="Loading groups") on the skeleton container to ensure screen reader compatibility without excessive individual element announcements.
Maintained theming compatibility by utilizing theme.colors.surfaceVariant for the skeleton background.
Logged changes in .Jules/todo.md and .Jules/changelog.md.

PR created automatically by Jules for task 17534708213155520977 started by @Devasy23

Summary by CodeRabbit

New Features
- Mobile loading states now display animated skeleton placeholders instead of generic indicators, providing a more polished user experience
- Enhanced accessibility support for loading states with progress indicator attributes

Replaced the default ActivityIndicator on the mobile HomeScreen with a proper Skeleton loading state that mimics the list content layout, providing a smoother transition and better perceived performance. Added reusable Skeleton and GroupListSkeleton components with accessibility support. Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>

google-labs-jules · 2026-03-14T19:49:25Z

👋 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 @jules. You can find this option in the Pull Request section of your global Jules UI settings. You can always switch back!

New to Jules? Learn more at jules.google/docs.

For security, I will only act on instructions from the user who triggered this task.

netlify · 2026-03-14T19:49:29Z

✅ Deploy Preview for split-but-wiser canceled.

Name	Link
🔨 Latest commit	`c01aeea`
🔍 Latest deploy log	https://app.netlify.com/projects/split-but-wiser/deploys/69b5bbc71587b900081e9e30

coderabbitai · 2026-03-14T19:49:45Z

Walkthrough

This pull request introduces a mobile skeleton loading feature set, replacing the generic ActivityIndicator with a new GroupListSkeleton component in HomeScreen. The implementation includes a custom animated Skeleton primitive and a GroupListSkeleton container with accessibility improvements, along with documentation updates.

Changes

Cohort / File(s)	Summary
Documentation & Metadata `.Jules/changelog.md`, `.Jules/todo.md`	Added changelog entry for new skeleton loading feature and marked the corresponding todo task as complete with metadata updates.
Skeleton Components `mobile/components/ui/Skeleton.js`, `mobile/components/skeletons/GroupListSkeleton.js`	Introduced new Skeleton primitive with animated opacity loop (0.3-0.7 over 800ms) and GroupListSkeleton container component rendering customizable count of skeleton cards with accessibility attributes (progressbar role, loading label).
Integration `mobile/screens/HomeScreen.js`	Replaced ActivityIndicator loading indicator with GroupListSkeleton component; updated imports accordingly.

Suggested reviewers

vrajpatelll

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title '[jules] enhance: Complete skeleton loading for HomeScreen groups' directly and clearly summarizes the main change: implementing skeleton loading for the HomeScreen groups feature, replacing ActivityIndicator with an animated skeleton component.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

📝 Coding Plan

Generate coding plan for human review comments

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.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can enable review details to help with troubleshooting, context usage and more.

Enable the reviews.review_details setting to include review details such as the model used, the time taken for each step and more in the review comments.

codecov · 2026-03-14T19:50:32Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@9404621). Learn more about missing BASE report.
✅ All tests successful. No failed tests found.

Additional details and impacted files

@@           Coverage Diff           @@
##             main     #301   +/-   ##
=======================================
  Coverage        ?   63.55%           
=======================================
  Files           ?       21           
  Lines           ?     2456           
  Branches        ?      254           
=======================================
  Hits            ?     1561           
  Misses          ?      831           
  Partials        ?       64

Components	Coverage Δ
Authentication System	`71.35% <ø> (?)`
Expense Management	`70.15% <ø> (?)`
Group Management	`73.78% <ø> (?)`
User Management	`97.16% <ø> (?)`
Backend Core	`70.78% <ø> (?)`

🚀 New features to boost your workflow:

📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

coderabbitai

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/changelog.md:
- Line 62: Rewrite the changelog line to use clearer prose and quote the role
token exactly; replace the current bullet with something like: "Improved screen
reader support by enabling accessibility (accessible=true) and setting
accessibilityRole='progressbar' with accessibilityLabel='Loading groups'."
Ensure the role token progressbar is single-quoted or double-quoted in the text
and keep the attribute-like fragments (accessible=true, accessibilityRole,
accessibilityLabel) intact for clarity.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 43e77267-2cec-4cf1-ad02-c35653592086

📥 Commits

Reviewing files that changed from the base of the PR and between 9404621 and c01aeea.

📒 Files selected for processing (5)

.Jules/changelog.md
.Jules/todo.md
mobile/components/skeletons/GroupListSkeleton.js
mobile/components/ui/Skeleton.js
mobile/screens/HomeScreen.js

coderabbitai · 2026-03-14T19:53:39Z

.Jules/changelog.md

+  - **Features:**
+    - Custom animated `Skeleton` primitive utilizing `Animated.loop` to mimic content layout.
+    - Added comprehensive skeleton list container component mirroring actual data appearance.
+    - Ensured screen reader compatibility with appropriate progressbar ARIA equivalents (`accessible=true`, `accessibilityRole=progressbar`, `accessibilityLabel="Loading groups"`).


⚠️ Potential issue | 🟡 Minor

Tighten the accessibility wording in this changelog bullet.

Use clearer prose and quote the role token to avoid ambiguity in docs.

Suggested wording fix

- - Ensured screen reader compatibility with appropriate progressbar ARIA equivalents (`accessible=true`, `accessibilityRole=progressbar`, `accessibilityLabel="Loading groups"`). + - Ensured screen reader compatibility with progress bar semantics (`accessible={true}`, `accessibilityRole="progressbar"`, `accessibilityLabel="Loading groups"`).

📝 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.

Suggested change

- Ensured screen reader compatibility with appropriate progressbar ARIA equivalents (`accessible=true`, `accessibilityRole=progressbar`, `accessibilityLabel="Loading groups"`).

- Ensured screen reader compatibility with progress bar semantics (`accessible={true}`, `accessibilityRole="progressbar"`, `accessibilityLabel="Loading groups"`).

🧰 Tools

🪛 LanguageTool

[grammar] ~62-~62: Ensure spelling is correct
Context: ...n reader compatibility with appropriate progressbar ARIA equivalents (accessible=true, `a...

(QB_NEW_EN_ORTHOGRAPHY_ERROR_IDS_1)

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed. In @.Jules/changelog.md at line 62, Rewrite the changelog line to use clearer prose and quote the role token exactly; replace the current bullet with something like: "Improved screen reader support by enabling accessibility (accessible=true) and setting accessibilityRole='progressbar' with accessibilityLabel='Loading groups'." Ensure the role token progressbar is single-quoted or double-quoted in the text and keep the attribute-like fragments (accessible=true, accessibilityRole, accessibilityLabel) intact for clarity.

Devasy requested a review from vrajpatelll as a code owner March 14, 2026 19:49

coderabbitai bot reviewed Mar 14, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[jules] enhance: Complete skeleton loading for HomeScreen groups#301

[jules] enhance: Complete skeleton loading for HomeScreen groups#301
Devasy wants to merge 1 commit intomainfrom
enhance/mobile-skeleton-loading-17534708213155520977

Devasy commented Mar 14, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

google-labs-jules bot commented Mar 14, 2026

Uh oh!

netlify bot commented Mar 14, 2026 •

edited

Loading

Uh oh!

coderabbitai bot commented Mar 14, 2026 •

edited

Loading

Uh oh!

codecov bot commented Mar 14, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Mar 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	- Ensured screen reader compatibility with appropriate progressbar ARIA equivalents (`accessible=true`, `accessibilityRole=progressbar`, `accessibilityLabel="Loading groups"`).
	- Ensured screen reader compatibility with progress bar semantics (`accessible={true}`, `accessibilityRole="progressbar"`, `accessibilityLabel="Loading groups"`).

Conversation

Devasy commented Mar 14, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes

Summary by CodeRabbit

Uh oh!

google-labs-jules bot commented Mar 14, 2026

Uh oh!

netlify bot commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for split-but-wiser canceled.

Uh oh!

coderabbitai bot commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Suggested reviewers

Uh oh!

codecov bot commented Mar 14, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Mar 14, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Devasy commented Mar 14, 2026 •

edited by coderabbitai bot

Loading

netlify bot commented Mar 14, 2026 •

edited

Loading

coderabbitai bot commented Mar 14, 2026 •

edited

Loading

codecov bot commented Mar 14, 2026 •

edited

Loading