From a2ca7db052c0ce20b404f6f81b691850b3318b97 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 13 Mar 2024 14:33:54 +0000
Subject: mobile: Optimistic UI updates on actions

---
 .../mobile/components/bookmarks/BookmarkList.tsx   | 23 +++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

(limited to 'packages/mobile/components/bookmarks/BookmarkList.tsx')

diff --git a/packages/mobile/components/bookmarks/BookmarkList.tsx b/packages/mobile/components/bookmarks/BookmarkList.tsx
index 519ec47c..af5c9de7 100644
--- a/packages/mobile/components/bookmarks/BookmarkList.tsx
+++ b/packages/mobile/components/bookmarks/BookmarkList.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
-import { FlatList, Text, View } from "react-native";
+import { Text, View } from "react-native";
+import Animated, { LinearTransition } from "react-native-reanimated";
 
 import BookmarkCard from "./BookmarkCard";
 
@@ -37,25 +38,25 @@ export default function BookmarkList({
     apiUtils.bookmarks.getBookmark.invalidate();
   };
 
-  if (!data.bookmarks.length) {
-    return (
-      <View className="h-full items-center justify-center">
-        <Text className="text-xl">No Bookmarks</Text>
-      </View>
-    );
-  }
-
   return (
-    <FlatList
+    <Animated.FlatList
+      itemLayoutAnimation={LinearTransition}
       contentContainerStyle={{
         gap: 15,
         marginVertical: 15,
         alignItems: "center",
+        height: "100%",
       }}
-      renderItem={(b) => <BookmarkCard key={b.item.id} bookmark={b.item} />}
+      renderItem={(b) => <BookmarkCard bookmark={b.item} />}
+      ListEmptyComponent={
+        <View className="h-full items-center justify-center">
+          <Text className="text-xl">No Bookmarks</Text>
+        </View>
+      }
       data={data.bookmarks}
       refreshing={refreshing}
       onRefresh={onRefresh}
+      keyExtractor={(b) => b.id}
     />
   );
 }
-- 
cgit v1.2.3-70-g09d2