Implemented Lottie animation for Empty States#377
Conversation
📝 WalkthroughWalkthroughThis PR implements Lottie-based animations for empty states across the app. A reusable ChangesLottie Empty State Component & Screen Integration
Sequence DiagramsequenceDiagram
participant Screen
participant EmptyState
participant Lottie
participant Theme
Screen->>EmptyState: Render with message, subMessage
EmptyState->>Theme: useTheme() for colors
Theme-->>EmptyState: Return color values
EmptyState->>Lottie: Render animation with dimensions
Lottie-->>EmptyState: Animated output
EmptyState-->>Screen: Display animation + text
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add Comment |
|
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Introduces a reusable EmptyState component with a Lottie animation and replaces ad-hoc empty UI across multiple screens for visual consistency.
Changes:
- Adds new
EmptyStatecomponent usinglottie-react-native. - Refactors 8 screens to use
EmptyStateinstead of inline empty-state markup. - Adds
lottie-react-nativeand@lottiefiles/dotlottie-reactdependencies; reformatsapp.jsonplugins array.
Reviewed changes
Copilot reviewed 11 out of 13 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| app/src/components/EmptyState.js | New shared empty state component with Lottie animation. |
| app/src/screens/UserFeed.js | Switches empty UI to EmptyState; uses ListFooterComponent instead of ListEmptyComponent. |
| app/src/screens/SavedEventsScreen.js | Replaces inline empty view with EmptyState. |
| app/src/screens/RemindersScreen.js | Replaces inline empty view with EmptyState. |
| app/src/screens/ParticipatingEventsScreen.js | Replaces empty text with EmptyState. |
| app/src/screens/MyRegisteredEventsScreen.js | Replaces inline empty view with EmptyState. |
| app/src/screens/MyEventsScreen.js | Uses EmptyState with action button as children. |
| app/src/screens/MobileAdmin.js | Replaces inline empty view with EmptyState. |
| app/src/screens/ClubProfileScreen.js | Replaces inline empty view with EmptyState. |
| app/package.json | Adds Lottie dependencies. |
| app/app.json | Reformats plugins array to one line. |
Files not reviewed (1)
- app/package-lock.json: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ListFooterComponent={ | ||
| displayList.length === 0 ? ( | ||
| <EmptyState |
| animation: { | ||
| width: 200, | ||
| height: 200, | ||
| }, | ||
| animationSmall: { | ||
| width: 120, | ||
| height: 120, | ||
| }, |
| "@expo-google-fonts/outfit": "^0.2.3", | ||
| "@expo/vector-icons": "~14.0.4", | ||
| "@expo/webpack-config": "^19.0.0", | ||
| "@lottiefiles/dotlottie-react": "^0.19.4", |
| "@react-native-community/datetimepicker", | ||
| "expo-secure-store" | ||
| ], | ||
| "plugins": ["expo-notifications","@react-native-community/datetimepicker","expo-secure-store"], |
| </Text> | ||
| <EmptyState | ||
| message="No events created" | ||
| subMessage="You haven't created any events yet." |
| <LottieView | ||
| source={require('../../assets/empty-state-animation.json')} |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
app/src/screens/MyEventsScreen.js (1)
200-208:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winAlign CTA copy with the action intent.
Line 207 says “Create Layout”, but this flow creates an event (
navigation.navigate('CreateEvent')). Rename it to avoid user confusion.✏️ Proposed fix
- <Text style={styles.createBtnText}>Create Layout</Text> + <Text style={styles.createBtnText}>Create Event</Text>🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/src/screens/MyEventsScreen.js` around lines 200 - 208, The CTA text "Create Layout" mislabels the action — the button triggers navigation.navigate('CreateEvent') and should indicate creating an event; update the Text node inside the TouchableOpacity (the component using styles.createBtnText) to read something like "Create Event" (or other event-focused copy) so the TouchableOpacity/ Text accurately reflect the CreateEvent flow and avoid user confusion.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@app/src/screens/MyEventsScreen.js`:
- Around line 200-208: The CTA text "Create Layout" mislabels the action — the
button triggers navigation.navigate('CreateEvent') and should indicate creating
an event; update the Text node inside the TouchableOpacity (the component using
styles.createBtnText) to read something like "Create Event" (or other
event-focused copy) so the TouchableOpacity/ Text accurately reflect the
CreateEvent flow and avoid user confusion.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 1b21b510-51e1-4136-8de3-beec67d599a8
⛔ Files ignored due to path filters (1)
app/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (12)
app/app.jsonapp/assets/empty-state-animation.jsonapp/package.jsonapp/src/components/EmptyState.jsapp/src/screens/ClubProfileScreen.jsapp/src/screens/MobileAdmin.jsapp/src/screens/MyEventsScreen.jsapp/src/screens/MyRegisteredEventsScreen.jsapp/src/screens/ParticipatingEventsScreen.jsapp/src/screens/RemindersScreen.jsapp/src/screens/SavedEventsScreen.jsapp/src/screens/UserFeed.js
|
@roshankumar0036singh Kindly review the changes and merge the PR whenever you are free |
This pull request introduces a reusable
EmptyStatecomponent featuring a Lottie animation to standardize and enhance the empty state UI across multiple screens. It also adds the necessary dependencies for Lottie support and refactors several screens to use the new component, replacing previous custom empty state implementations.New Feature: Reusable Empty State Component
EmptyStatecomponent (app/src/components/EmptyState.js) that displays a Lottie animation and customizable messages for empty state scenarios.fixes #94
Summary by CodeRabbit
New Features
Chores