From 589f19fedea44c0570b4ba915661a4277e953c31 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 10 Feb 2026 19:45:54 +0000
Subject: [PATCH] [jules] ux: Add skeleton loading for HomeScreen groups

Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com>
---
 .Jules/changelog.md                           |  7 +++
 .Jules/todo.md                                |  3 +-
 .../components/skeletons/GroupListSkeleton.js | 47 +++++++++++++++++++
 mobile/components/ui/Skeleton.js              | 44 +++++++++++++++++
 mobile/screens/HomeScreen.js                  | 10 +---
 5 files changed, 102 insertions(+), 9 deletions(-)
 create mode 100644 mobile/components/skeletons/GroupListSkeleton.js
 create mode 100644 mobile/components/ui/Skeleton.js

diff --git a/.Jules/changelog.md b/.Jules/changelog.md
index 11fc864..319260c 100644
--- a/.Jules/changelog.md
+++ b/.Jules/changelog.md
@@ -7,6 +7,13 @@
 ## [Unreleased]
 
 ### Added
+- **Mobile Skeleton Loading:** Implemented skeleton loading for the HomeScreen group list.
+  - **Features:**
+    - Created reusable `Skeleton` component with pulsing animation.
+    - Replaced `ActivityIndicator` with `GroupListSkeleton` in `HomeScreen`.
+    - Improved perceived performance and reduced layout shift.
+  - **Technical:** Created `mobile/components/ui/Skeleton.js` and `mobile/components/skeletons/GroupListSkeleton.js`.
+
 - **Password Strength Meter:** Added a visual password strength indicator to the signup form.
   - **Features:**
     - Real-time strength calculation (Length, Uppercase, Lowercase, Number, Symbol).
diff --git a/.Jules/todo.md b/.Jules/todo.md
index ebb0c7a..078fa81 100644
--- a/.Jules/todo.md
+++ b/.Jules/todo.md
@@ -57,7 +57,8 @@
   - Impact: Native feel, users can easily refresh data
   - Size: ~150 lines
 
-- [ ] **[ux]** Complete skeleton loading for HomeScreen groups
+- [x] **[ux]** Complete skeleton loading for HomeScreen groups
+  - Completed: 2026-02-09
   - File: `mobile/screens/HomeScreen.js`
   - Context: Replace ActivityIndicator with skeleton group cards
   - Impact: Better loading experience, less jarring
diff --git a/mobile/components/skeletons/GroupListSkeleton.js b/mobile/components/skeletons/GroupListSkeleton.js
new file mode 100644
index 0000000..f328198
--- /dev/null
+++ b/mobile/components/skeletons/GroupListSkeleton.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Card } from 'react-native-paper';
+import Skeleton from '../ui/Skeleton';
+
+const GroupListSkeleton = () => {
+  return (
+    <View
+      style={styles.container}
+      accessible={true}
+      accessibilityLabel="Loading groups"
+      accessibilityRole="progressbar"
+    >
+      {[...Array(5)].map((_, index) => (
+        <Card key={index} style={styles.card}>
+          <Card.Title
+            title={<Skeleton width={120} height={20} />}
+            left={(props) => (
+              <Skeleton
+                width={props.size}
+                height={props.size}
+                borderRadius={props.size / 2}
+              />
+            )}
+          />
+          <Card.Content>
+            <Skeleton width={200} height={16} style={styles.subtitle} />
+          </Card.Content>
+        </Card>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  card: {
+    marginBottom: 16,
+  },
+  subtitle: {
+    marginTop: 4,
+  },
+});
+
+export default GroupListSkeleton;
diff --git a/mobile/components/ui/Skeleton.js b/mobile/components/ui/Skeleton.js
new file mode 100644
index 0000000..84f5f22
--- /dev/null
+++ b/mobile/components/ui/Skeleton.js
@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import { useTheme } from 'react-native-paper';
+
+const Skeleton = ({ width, height, borderRadius = 4, style }) => {
+  const theme = useTheme();
+  const opacity = useRef(new Animated.Value(0.5)).current;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 1,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.5,
+          duration: 1000,
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: theme.colors.surfaceVariant,
+          opacity,
+        },
+        style,
+      ]}
+      accessibilityRole="progressbar"
+      accessibilityLabel="Loading..."
+    />
+  );
+};
+
+export default Skeleton;
diff --git a/mobile/screens/HomeScreen.js b/mobile/screens/HomeScreen.js
index d2f3c38..e127f43 100644
--- a/mobile/screens/HomeScreen.js
+++ b/mobile/screens/HomeScreen.js
@@ -13,6 +13,7 @@ import {
 import HapticButton from '../components/ui/HapticButton';
 import HapticCard from '../components/ui/HapticCard';
 import { HapticAppbarAction } from '../components/ui/HapticAppbar';
+import GroupListSkeleton from '../components/skeletons/GroupListSkeleton';
 import * as Haptics from "expo-haptics";
 import { createGroup, getGroups, getOptimizedSettlements } from "../api/groups";
 import { AuthContext } from "../context/AuthContext";
@@ -257,9 +258,7 @@ const HomeScreen = ({ navigation }) => {
       </Appbar.Header>
 
       {isLoading ? (
-        <View style={styles.loaderContainer}>
-          <ActivityIndicator size="large" />
-        </View>
+        <GroupListSkeleton />
       ) : (
         <FlatList
           data={groups}
@@ -289,11 +288,6 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  loaderContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-  },
   list: {
     padding: 16,
   },