Handle Empty State for Feedback Screen with Custom FeedbackEmptyState Component

apps/frontend/app/(tabs)/(profile)/feedback.tsx

@@ -1,10 +1,32 @@
+import { icons } from '@/assets';
 import { AccountInfo, ChipFilter, DividerX, ReviewCard } from '@/components';
 import { useProfile, useReviews } from '@/hooks';
 import cn from 'clsx';
 import { useEffect, useState } from 'react';
-import { FlatList, Platform, useColorScheme, View } from 'react-native';
+import { FlatList, Image, Platform, Text, useColorScheme, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
+const FeedbackEmptyState = () => {
+  const isDark = useColorScheme() === 'dark';
+
+  return (
+    <View className='items-center gap-y-4 py-12'>
+      <Image
+        source={isDark ? icons.dark.messageFav : icons.light.messageFav}
+        className='size-32'
+        resizeMode='contain'
+      />
+
+      <View className='items-center gap-y-2'>
+        <Text className='font-clashDisplay text-lg text-body dark:text-body-dark'>No Feedback Yet</Text>
+        <Text className='font-satoshi text-sm text-label dark:text-label-dark'>
+          Feedback from other users will appear here
+        </Text>
+      </View>
+    </View>
+  );
+};
+
 const Feedback = () => {
   const isDark = useColorScheme() === 'dark';
 
@@ -19,6 +41,9 @@ const Feedback = () => {
     android: 'pb-24',
   });
 
+  const isEmpty = reviewsList.length === 0;
+  const isAllEmpty = filterReviewsByType('all').length === 0;
+
   useEffect(() => {
     setReviewsList(filterReviewsByType(reviewType.id));
   }, [reviewType]);
@@ -36,11 +61,14 @@ const Feedback = () => {
           data={reviewsList}
           initialNumToRender={0}
           showsVerticalScrollIndicator={false}
-          keyExtractor={(item, index) => item.id.toString()}
+          keyExtractor={(item) => item.id.toString()}
           contentContainerClassName={adsListStyle}
           renderItem={({ item, index }) => <ReviewCard review={item} index={index} />}
           ItemSeparatorComponent={() => <DividerX style={cn('mt-3 mb-4', isDark ? 'opacity-40' : 'opacity-25')} />}
-          ListFooterComponent={() => <DividerX style={cn('mt-3', isDark ? 'opacity-40' : 'opacity-25')} />}
+          ListFooterComponent={
+            !isEmpty ? () => <DividerX style={cn('mt-3', isDark ? 'opacity-40' : 'opacity-25')} /> : null
+          }
+          ListEmptyComponent={isAllEmpty ? <FeedbackEmptyState /> : null}
         />
       </View>
     </SafeAreaView>

apps/frontend/assets/index.ts

@@ -74,6 +74,9 @@ const icons = {
     tickHalo: require('./icons/light/tick-halo.png'),
     clockHalo: require('./icons/light/clock-halo.png'),
 
+    // Feedback
+    messageFav: require('./icons/light/message-favorite.png'),
+
     // Active Tab
     active: {
       home: require('./icons/light/active/home.png'),
@@ -150,6 +153,9 @@ const icons = {
     tickHalo: require('./icons/dark/tick-halo.png'),
     clockHalo: require('./icons/dark/clock-halo.png'),
 
+    // Feedback
+    messageFav: require('./icons/dark/message-favorite.png'),
+
     // Active Tab
     active: {
       home: require('./icons/dark/active/home.png'),