[jules] ux: Complete skeleton loading for HomeScreen groups

.Jules/changelog.md

@@ -7,6 +7,14 @@
 ## [Unreleased]
 
 ### Added
+- **Mobile Skeleton Loading:** Added a skeleton loading state for the Groups list on the Home screen.
+  - **Features:**
+    - Created a generic `Skeleton` component using `react-native-reanimated` for smooth pulsing animations.
+    - Created a specific `GroupListSkeleton` that mimics the layout of the actual `HapticCard` list.
+    - Improved perceived performance and reduced layout shift when loading the home screen.
+    - Added proper accessibility labels (`progressbar` role) to the loading state.
+  - **Technical:** Created `mobile/components/ui/Skeleton.js` and `mobile/components/skeletons/GroupListSkeleton.js`. Integrated into `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/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-07
+  - Files modified: `mobile/components/ui/Skeleton.js`, `mobile/components/skeletons/GroupListSkeleton.js`, `mobile/screens/HomeScreen.js`
   - Context: Replace ActivityIndicator with skeleton group cards
   - Impact: Better loading experience, less jarring
   - Size: ~40 lines
@@ -143,6 +144,11 @@
 
 ## ✅ Completed Tasks
 
+- [x] **[ux]** Complete skeleton loading for HomeScreen groups
+  - Completed: 2026-04-07
+  - Files modified: `mobile/components/ui/Skeleton.js`, `mobile/components/skeletons/GroupListSkeleton.js`, `mobile/screens/HomeScreen.js`
+  - Impact: Users now see a skeleton loading state instead of an activity indicator while groups are loading on the home screen.
+
 - [x] **[ux]** Comprehensive empty states with illustrations
   - Completed: 2026-01-01
   - Files modified: `web/components/ui/EmptyState.tsx`, `web/pages/Groups.tsx`, `web/pages/Friends.tsx`

mobile/components/skeletons/GroupListSkeleton.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, StyleSheet, ScrollView } from 'react-native';
+import { Card } from 'react-native-paper';
+import Skeleton from '../ui/Skeleton';
+
+const GroupListSkeleton = () => {
+  // Array of 5 items to show while loading
+  const skeletonItems = Array.from({ length: 5 }, (_, i) => i);
+
+  return (
+    <View
+      style={styles.container}
+      accessible={true}
+      accessibilityRole="progressbar"
+      accessibilityLabel="Loading groups"
+    >
+      <ScrollView contentContainerStyle={styles.list}>
+        {skeletonItems.map((item) => (
+          <Card key={item} style={styles.card}>
+            <Card.Title
+              title={<Skeleton width={120} height={20} />}
+              left={(props) => (
+                <View {...props}>
+                  <Skeleton width={40} height={40} borderRadius={20} />
+                </View>
+              )}
+            />
+            <Card.Content>
+              <Skeleton width={150} height={16} style={styles.statusSkeleton} />
+            </Card.Content>
+          </Card>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  list: {
+    padding: 16,
+  },
+  card: {
+    marginBottom: 16,
+  },
+  statusSkeleton: {
+    marginTop: 4,
+  },
+});
+
+export default GroupListSkeleton;

mobile/components/ui/Skeleton.js

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  withSequence,
+  cancelAnimation,
+} from 'react-native-reanimated';
+import { useTheme } from 'react-native-paper';
+
+const Skeleton = ({ width, height, borderRadius = 4, style }) => {
+  const theme = useTheme();
+  const opacity = useSharedValue(0.3);
+
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withSequence(
+        withTiming(0.7, { duration: 1000 }),
+        withTiming(0.3, { duration: 1000 })
+      ),
+      -1,
+      true
+    );
+
+    return () => {
+      cancelAnimation(opacity);
+    };
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    return {
+      opacity: opacity.value,
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        styles.skeleton,
+        {
+          width,
+          height,
+          borderRadius,
+          backgroundColor: theme.colors.surfaceVariant,
+        },
+        animatedStyle,
+        style,
+      ]}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  skeleton: {
+    overflow: 'hidden',
+  },
+});
+
+export default Skeleton;