fix(mobile): Fix flicker on search

2 files changed, 67 insertions, 39 deletions

diff --git a/apps/mobile/components/bookmarks/BookmarkList.tsx b/apps/mobile/components/bookmarks/BookmarkList.tsx
index 8a19c045..9176f66d 100644
--- a/apps/mobile/components/bookmarks/BookmarkList.tsx
+++ b/apps/mobile/components/bookmarks/BookmarkList.tsx
@@ -1,53 +1,29 @@
-import { useEffect, useRef, useState } from "react";
+import { useRef } from "react";
 import { ActivityIndicator, Keyboard, Text, View } from "react-native";
 import Animated, { LinearTransition } from "react-native-reanimated";
-import { api } from "@/lib/trpc";
 import { useScrollToTop } from "@react-navigation/native";
 
-import type { ZGetBookmarksRequest } from "@hoarder/trpc/types/bookmarks";
+import type { ZBookmark } from "@hoarder/trpc/types/bookmarks";
 
-import FullPageSpinner from "../ui/FullPageSpinner";
 import BookmarkCard from "./BookmarkCard";
 
 export default function BookmarkList({
-  query,
+  bookmarks,
   header,
+  onRefresh,
+  fetchNextPage,
+  isFetchingNextPage,
+  isRefreshing,
 }: {
-  query: ZGetBookmarksRequest;
+  bookmarks: ZBookmark[];
+  onRefresh: () => void,
+  isRefreshing: boolean,
+  fetchNextPage?: () => void,
   header?: React.ReactElement;
+  isFetchingNextPage?: boolean,
 }) {
-  const apiUtils = api.useUtils();
-  const [refreshing, setRefreshing] = useState(false);
   const flatListRef = useRef(null);
   useScrollToTop(flatListRef);
-  const {
-    data,
-    isPending,
-    isPlaceholderData,
-    error,
-    fetchNextPage,
-    isFetchingNextPage,
-  } = api.bookmarks.getBookmarks.useInfiniteQuery(query, {
-    initialCursor: null,
-    getNextPageParam: (lastPage) => lastPage.nextCursor,
-  });
-
-  useEffect(() => {
-    setRefreshing(isPending || isPlaceholderData);
-  }, [isPending, isPlaceholderData]);
-
-  if (error) {
-    return <Text>{JSON.stringify(error)}</Text>;
-  }
-
-  if (isPending || !data) {
-    return <FullPageSpinner />;
-  }
-
-  const onRefresh = () => {
-    apiUtils.bookmarks.getBookmarks.invalidate();
-    apiUtils.bookmarks.getBookmark.invalidate();
-  };
 
   return (
     <Animated.FlatList
@@ -64,12 +40,12 @@ export default function BookmarkList({
           <Text className="text-xl">No Bookmarks</Text>
         </View>
       }
-      data={data.pages.flatMap((p) => p.bookmarks)}
-      refreshing={refreshing}
+      data={bookmarks}
+      refreshing={isRefreshing}
       onRefresh={onRefresh}
       onScrollBeginDrag={Keyboard.dismiss}
       keyExtractor={(b) => b.id}
-      onEndReached={() => fetchNextPage()}
+      onEndReached={fetchNextPage}
       ListFooterComponent={
         isFetchingNextPage ? (
           <View className="items-center">
diff --git a/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx b/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx
new file mode 100644
index 00000000..8495ee22
--- /dev/null
+++ b/apps/mobile/components/bookmarks/UpdatingBookmarkList.tsx
@@ -0,0 +1,52 @@
+import { Text } from "react-native";
+import { api } from "@/lib/trpc";
+
+import type { ZGetBookmarksRequest } from "@hoarder/trpc/types/bookmarks";
+
+import FullPageSpinner from "../ui/FullPageSpinner";
+import BookmarkList2 from "./BookmarkList";
+
+export default function UpdatingBookmarkList({
+  query,
+  header,
+}: {
+  query: ZGetBookmarksRequest;
+  header?: React.ReactElement;
+}) {
+  const apiUtils = api.useUtils();
+  const {
+    data,
+    isPending,
+    isPlaceholderData,
+    error,
+    fetchNextPage,
+    isFetchingNextPage,
+  } = api.bookmarks.getBookmarks.useInfiniteQuery(query, {
+    initialCursor: null,
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+  });
+
+  if (error) {
+    return <Text>{JSON.stringify(error)}</Text>;
+  }
+
+  if (isPending || !data) {
+    return <FullPageSpinner />;
+  }
+
+  const onRefresh = () => {
+    apiUtils.bookmarks.getBookmarks.invalidate();
+    apiUtils.bookmarks.getBookmark.invalidate();
+  };
+
+  return (
+    <BookmarkList2
+      bookmarks={data.pages.flatMap((p) => p.bookmarks)}
+      header={header}
+      onRefresh={onRefresh}
+      fetchNextPage={fetchNextPage}
+      isFetchingNextPage={isFetchingNextPage}
+      isRefreshing={isPending || isPlaceholderData}
+    />
+  );
+}