Mobile HomeScreen Skeleton Loading

.Jules/changelog.md

@@ -7,6 +7,15 @@
 ## [Unreleased]
 
 ### Added
+- **Mobile Skeleton Loading:** Implemented a skeleton loading state for the mobile Home screen.
+  - **Features:**
+    - Replaced `ActivityIndicator` with a pulsing skeleton list that mimics the actual group cards.
+    - Created reusable `Skeleton` component using `Animated` API for performant native driver animations.
+    - Created `GroupListSkeleton` component matching the exact layout of `HomeScreen` cards.
+    - Dual-theme support via `react-native-paper` theme colors.
+    - Added accessibility support (`accessibilityRole="progressbar"`, `accessibilityLabel="Loading groups list"`).
+  - **Technical:** Created `mobile/components/ui/Skeleton.js`, `mobile/components/skeletons/GroupListSkeleton.js`. Updated `mobile/screens/HomeScreen.js`.
+
 - **Password Strength Meter:** Added a visual password strength indicator to the signup form.
   - **Features:**
     - Real-time strength calculation (Length, Uppercase, Lowercase, Number, Symbol).

.Jules/knowledge.md

@@ -299,6 +299,36 @@ Commonly used components:
 - `<Portal>` and `<Modal>` for overlays
 - `<ActivityIndicator>` for loading states
 
+### Mobile Skeleton Loading Pattern
+
+**Date:** 2026-02-13
+**Context:** Creating performant skeleton screens in React Native
+
+To create a pulsing skeleton effect without external libraries:
+
+```javascript
+// 1. Create Animated Value
+const opacity = useRef(new Animated.Value(0.3)).current;
+
+// 2. Loop Animation
+useEffect(() => {
+  const anim = Animated.loop(
+    Animated.sequence([
+      Animated.timing(opacity, { toValue: 0.7, duration: 800, useNativeDriver: true }),
+      Animated.timing(opacity, { toValue: 0.3, duration: 800, useNativeDriver: true }),
+    ])
+  );
+  anim.start();
+  return () => anim.stop();
+}, []);
+
+// 3. Render Animated.View
+<Animated.View style={{ opacity, backgroundColor: theme.colors.surfaceVariant, ... }} />
+```
+
+**Accessibility:**
+Always wrap the skeleton container with `accessibilityRole="progressbar"` and a descriptive `accessibilityLabel` so screen readers know content is loading.
+
 ### Safe Area Pattern
 
 **Date:** 2026-01-01
@@ -578,8 +608,6 @@ _Document errors and their solutions here as you encounter them._
 - Verification requires triggering an error during render (e.g., conditional throw).
 - Must wrap Router if using `useNavigate` or `Link` in fallback.
 
----
-
 ### ✅ Successful PR Pattern: Toast Notification System (#227)
 
 **Date:** 2026-01-13

.Jules/todo.md

@@ -57,11 +57,12 @@
   - Impact: Native feel, users can easily refresh data
   - Size: ~150 lines
 
-- [ ] **[ux]** Complete skeleton loading for HomeScreen groups
-  - File: `mobile/screens/HomeScreen.js`
-  - Context: Replace ActivityIndicator with skeleton group cards
+- [x] **[ux]** Complete skeleton loading for HomeScreen groups
+  - Completed: 2026-02-13
+  - Files: `mobile/screens/HomeScreen.js`, `mobile/components/ui/Skeleton.js`, `mobile/components/skeletons/GroupListSkeleton.js`
+  - Context: Replaced ActivityIndicator with skeleton group cards
   - Impact: Better loading experience, less jarring
-  - Size: ~40 lines
+  - Size: ~60 lines
   - Added: 2026-01-01
 
 - [x] **[a11y]** Complete accessibility labels for all screens

mobile/components/skeletons/GroupListSkeleton.js

@@ -0,0 +1,39 @@
+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.list}
+      accessibilityRole="progressbar"
+      accessibilityLabel="Loading groups list"
+    >
+      {[1, 2, 3, 4, 5].map((key) => (
+        <Card key={key} style={styles.card}>
+          <Card.Title
+            title={<Skeleton width={120} height={20} />}
+            left={(props) => (
+              <Skeleton width={40} height={40} borderRadius={20} style={props.style} />
+            )}
+          />
+          <Card.Content>
+            <Skeleton width={200} height={16} style={{ marginTop: 4 }} />
+          </Card.Content>
+        </Card>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  list: {
+    padding: 16,
+  },
+  card: {
+    marginBottom: 16,
+  },
+});
+
+export default GroupListSkeleton;

mobile/components/ui/Skeleton.js

@@ -0,0 +1,46 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, View } from 'react-native';
+import { useTheme } from 'react-native-paper';
+
+const Skeleton = ({ width, height, borderRadius, style }) => {
+  const theme = useTheme();
+  const opacity = useRef(new Animated.Value(0.3)).current;
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: 0.7,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: 0.3,
+          duration: 800,
+          useNativeDriver: true,
+        }),
+      ])
+    );
+
+    animation.start();
+
+    return () => animation.stop();
+  }, [opacity]);
+
+  return (
+    <Animated.View
+      style={[
+        {
+          opacity,
+          backgroundColor: theme.colors.surfaceVariant,
+          width,
+          height,
+          borderRadius: borderRadius || 4,
+        },
+        style,
+      ]}
+    />
+  );
+};
+
+export default Skeleton;

mobile/screens/HomeScreen.js

@@ -17,6 +17,7 @@ import * as Haptics from "expo-haptics";
 import { createGroup, getGroups, getOptimizedSettlements } from "../api/groups";
 import { AuthContext } from "../context/AuthContext";
 import { formatCurrency, getCurrencySymbol } from "../utils/currency";
+import GroupListSkeleton from '../components/skeletons/GroupListSkeleton';
 
 const HomeScreen = ({ navigation }) => {
   const { token, logout, user } = useContext(AuthContext);
@@ -257,9 +258,7 @@ const HomeScreen = ({ navigation }) => {
       </Appbar.Header>
 
       {isLoading ? (
-        <View style={styles.loaderContainer}>
-          <ActivityIndicator size="large" />
-        </View>
+        <GroupListSkeleton />
       ) : (
         <FlatList
           data={groups}