[jules] ux: Complete skeleton loading for HomeScreen groups

.Jules/changelog.md

@@ -7,6 +7,13 @@
 ## [Unreleased]
 
 ### Added
+- **Mobile Skeleton Loading:** Added generic animated skeleton placeholders to reduce perceived load times.
+  - **Features:**
+    - Replaced blank screens and `ActivityIndicator` with native-feeling skeleton placeholders.
+    - Added `GroupListSkeleton` to `HomeScreen` to mirror the eventual shape of `HapticCard`s.
+    - Refactored `FriendsScreen` to reuse the generic `Skeleton` primitive.
+  - **Technical:** Created reusable `mobile/components/ui/Skeleton.js` utilizing `Animated.loop`. Created `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).

.Jules/todo.md

@@ -57,8 +57,9 @@
   - Impact: Native feel, users can easily refresh data
   - Size: ~150 lines
 
-- [ ] **[ux]** Complete skeleton loading for HomeScreen groups
-  - File: `mobile/screens/HomeScreen.js`
+- [x] **[ux]** Complete skeleton loading for HomeScreen groups
+  - Completed: 2026-04-03
+  - File: `mobile/screens/HomeScreen.js`, `mobile/components/ui/Skeleton.js`, `mobile/components/skeletons/GroupListSkeleton.js`
   - Context: Replace ActivityIndicator with skeleton group cards
   - Impact: Better loading experience, less jarring
   - Size: ~40 lines
@@ -168,3 +169,8 @@
   - Completed: 2026-02-08
   - Files modified: `web/components/ui/PasswordStrength.tsx`, `web/pages/Auth.tsx`
   - Impact: Provides visual feedback on password complexity during signup
+
+- [x] **[ux]** Complete skeleton loading for HomeScreen groups
+  - Completed: 2026-04-03
+  - Files modified: `mobile/screens/HomeScreen.js`, `mobile/screens/FriendsScreen.js`, `mobile/components/ui/Skeleton.js`, `mobile/components/skeletons/GroupListSkeleton.js`
+  - Impact: Replaced standard ActivityIndicator with contextual generic shimmering Skeleton components for a smoother perceived load time.

mobile/components/skeletons/GroupListSkeleton.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Card } from 'react-native-paper';
+import Skeleton from '../ui/Skeleton';
+
+const GroupListSkeleton = ({ count = 3 }) => {
+  return (
+    <View
+      accessible={true}
+      accessibilityRole="progressbar"
+      accessibilityLabel="Loading groups"
+      style={styles.container}
+    >
+      {Array.from({ length: count }).map((_, index) => (
+        <Card key={index} style={styles.card}>
+          <Card.Title
+            title={<Skeleton width="60%" height={24} borderRadius={4} />}
+            left={() => <Skeleton width={40} height={40} borderRadius={20} />}
+          />
+          <Card.Content>
+            <Skeleton width="40%" height={16} borderRadius={4} style={{ marginTop: 8 }} />
+          </Card.Content>
+        </Card>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  card: {
+    marginBottom: 16,
+  },
+});
+
+export default GroupListSkeleton;

mobile/components/ui/Skeleton.js

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

mobile/screens/FriendsScreen.js

@@ -1,6 +1,6 @@
 import { useIsFocused } from "@react-navigation/native";
-import { useContext, useEffect, useRef, useState } from "react";
-import { Alert, Animated, FlatList, RefreshControl, StyleSheet, View } from "react-native";
+import { useContext, useEffect, useState } from "react";
+import { Alert, FlatList, RefreshControl, StyleSheet, View } from "react-native";
 import {
   Appbar,
   Avatar,
@@ -13,6 +13,7 @@ import HapticIconButton from '../components/ui/HapticIconButton';
 import { HapticListAccordion } from '../components/ui/HapticList';
 import { triggerPullRefreshHaptic } from '../components/ui/hapticUtils';
 import { getFriendsBalance, getGroups } from "../api/groups";
+import Skeleton from "../components/ui/Skeleton";
 import { AuthContext } from "../context/AuthContext";
 import { formatCurrency } from "../utils/currency";
 
@@ -167,42 +168,12 @@ const FriendsScreen = () => {
     );
   };
 
-  // Shimmer skeleton components
-  const opacityAnim = useRef(new Animated.Value(0.3)).current;
-  useEffect(() => {
-    const loop = Animated.loop(
-      Animated.sequence([
-        Animated.timing(opacityAnim, {
-          toValue: 1,
-          duration: 700,
-          useNativeDriver: true,
-        }),
-        Animated.timing(opacityAnim, {
-          toValue: 0.3,
-          duration: 700,
-          useNativeDriver: true,
-        }),
-      ])
-    );
-    loop.start();
-    return () => loop.stop();
-  }, [opacityAnim]);
-
   const SkeletonRow = () => (
     <View style={styles.skeletonRow}>
-      <Animated.View
-        style={[styles.skeletonAvatar, { opacity: opacityAnim }]}
-      />
+      <Skeleton width={48} height={48} borderRadius={24} />
       <View style={{ flex: 1, marginLeft: 12 }}>
-        <Animated.View
-          style={[styles.skeletonLine, { width: "60%", opacity: opacityAnim }]}
-        />
-        <Animated.View
-          style={[
-            styles.skeletonLineSmall,
-            { width: "40%", opacity: opacityAnim },
-          ]}
-        />
+        <Skeleton width="60%" height={14} borderRadius={6} style={{ marginBottom: 6 }} />
+        <Skeleton width="40%" height={12} borderRadius={6} />
       </View>
     </View>
   );
@@ -315,23 +286,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     marginBottom: 14,
   },
-  skeletonAvatar: {
-    width: 48,
-    height: 48,
-    borderRadius: 24,
-    backgroundColor: "#e0e0e0",
-  },
-  skeletonLine: {
-    height: 14,
-    backgroundColor: "#e0e0e0",
-    borderRadius: 6,
-    marginBottom: 6,
-  },
-  skeletonLineSmall: {
-    height: 12,
-    backgroundColor: "#e0e0e0",
-    borderRadius: 6,
-  },
 });
 
 export default FriendsScreen;

mobile/screens/HomeScreen.js

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