From 238e4209307d059841f8b4a2e6c49c47fbbc8d9a Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Wed, 18 Feb 2026 20:01:06 +0000 Subject: [PATCH] [jules] ux: Complete skeleton loading for HomeScreen groups Co-authored-by: Devasy23 <110348311+Devasy23@users.noreply.github.com> --- .Jules/changelog.md | 8 +++ .Jules/knowledge.md | 15 ++++++ .Jules/todo.md | 11 ++-- .../components/skeletons/GroupListSkeleton.js | 54 +++++++++++++++++++ mobile/components/ui/Skeleton.js | 45 ++++++++++++++++ mobile/screens/HomeScreen.js | 11 +--- 6 files changed, 130 insertions(+), 14 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..6600da3 100644 --- a/.Jules/changelog.md +++ b/.Jules/changelog.md @@ -7,6 +7,14 @@ ## [Unreleased] ### Added +- **Mobile Skeleton Loading:** Implemented skeleton loading state for the Home screen groups list. + - **Features:** + - Created reusable `Skeleton` component with pulsing opacity animation. + - Created `GroupListSkeleton` component matching `HapticCard` layout (Avatar, Title, Status). + - Replaced generic `ActivityIndicator` with skeleton list for better perceived performance. + - Dual-theme support using `react-native-paper`'s surface variant colors. + - **Technical:** Created `mobile/components/ui/Skeleton.js` and `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). diff --git a/.Jules/knowledge.md b/.Jules/knowledge.md index 43a9ab0..855f2ae 100644 --- a/.Jules/knowledge.md +++ b/.Jules/knowledge.md @@ -299,6 +299,21 @@ Commonly used components: - `` and `` for overlays - `` for loading states +### Skeleton Loading Pattern + +**Date:** 2026-02-14 +**Context:** Implementing skeleton loading for Card components + +To perfectly match `Card` layout in skeletons, you can pass `Skeleton` components directly to `Card.Title` props: + +```javascript +} + left={(props) => } +/> +``` +This ensures the skeleton aligns exactly with the content state. + ### Safe Area Pattern **Date:** 2026-01-01 diff --git a/.Jules/todo.md b/.Jules/todo.md index ebb0c7a..cc6de47 100644 --- a/.Jules/todo.md +++ b/.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 - - Impact: Better loading experience, less jarring - - Size: ~40 lines +- [x] **[ux]** Complete skeleton loading for HomeScreen groups + - Completed: 2026-02-14 + - Files modified: `mobile/screens/HomeScreen.js`, `mobile/components/skeletons/GroupListSkeleton.js`, `mobile/components/ui/Skeleton.js` + - Context: Created reusable Skeleton component and GroupListSkeleton. Replaced ActivityIndicator. + - Impact: Professional loading experience that mimics actual content layout + - Size: ~70 lines - Added: 2026-01-01 - [x] **[a11y]** Complete accessibility labels for all screens diff --git a/mobile/components/skeletons/GroupListSkeleton.js b/mobile/components/skeletons/GroupListSkeleton.js new file mode 100644 index 0000000..ed5c53f --- /dev/null +++ b/mobile/components/skeletons/GroupListSkeleton.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { View, StyleSheet } from 'react-native'; +import { Card } from 'react-native-paper'; +import Skeleton from '../ui/Skeleton'; + +const GroupListSkeleton = () => { + return ( + + {[...Array(6)].map((_, index) => ( + + + } + left={(props) => ( + + )} + /> + + + + + ))} + + ); +}; + +const styles = StyleSheet.create({ + container: { + padding: 16, + }, + card: { + marginBottom: 16, + }, + status: { + 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..502aaa2 --- /dev/null +++ b/mobile/components/ui/Skeleton.js @@ -0,0 +1,45 @@ +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.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 ( + + ); +}; + +export default Skeleton; diff --git a/mobile/screens/HomeScreen.js b/mobile/screens/HomeScreen.js index d2f3c38..a36e129 100644 --- a/mobile/screens/HomeScreen.js +++ b/mobile/screens/HomeScreen.js @@ -1,7 +1,6 @@ import { useContext, useEffect, useState } from "react"; import { Alert, FlatList, RefreshControl, StyleSheet, View } from "react-native"; import { - ActivityIndicator, Appbar, Avatar, Modal, @@ -10,6 +9,7 @@ import { TextInput, useTheme, } from "react-native-paper"; +import GroupListSkeleton from '../components/skeletons/GroupListSkeleton'; import HapticButton from '../components/ui/HapticButton'; import HapticCard from '../components/ui/HapticCard'; import { HapticAppbarAction } from '../components/ui/HapticAppbar'; @@ -257,9 +257,7 @@ const HomeScreen = ({ navigation }) => { {isLoading ? ( - - - + ) : (