fix(mobile): Fix flicker on search

1 files changed, 28 insertions, 21 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/search.tsx b/apps/mobile/app/dashboard/(tabs)/search.tsx
index 25fc53d5..c1bb178b 100644
--- a/apps/mobile/app/dashboard/(tabs)/search.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/search.tsx
@@ -1,42 +1,49 @@
 import { useState } from "react";
 import { SafeAreaView, View } from "react-native";
 import BookmarkList from "@/components/bookmarks/BookmarkList";
+import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import { Input } from "@/components/ui/Input";
+import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
 import { keepPreviousData } from "@tanstack/react-query";
 import { useDebounce } from "use-debounce";
-import PageTitle from "@/components/ui/PageTitle";
 
 export default function Search() {
   const [search, setSearch] = useState("");
 
-  const [query] = useDebounce(search, 200);
+  const [query] = useDebounce(search, 10);
 
-  const { data } = api.bookmarks.searchBookmarks.useQuery(
+  const onRefresh = api.useUtils().bookmarks.searchBookmarks.invalidate;
+
+  const { data, isPending } = api.bookmarks.searchBookmarks.useQuery(
     { text: query },
     { placeholderData: keepPreviousData },
   );
 
+  if (!data) {
+    return <FullPageSpinner />;
+  }
+
   return (
     <SafeAreaView>
-      {data && (
-        <BookmarkList
-          query={{ids: data.bookmarks.map((b) => b.id)}}
-          header={
-            <View>
-              <PageTitle title="Search" />
-              <Input
-                placeholder="Search"
-                className="mx-4 bg-white"
-                value={search}
-                onChangeText={setSearch}
-                autoFocus
-                autoCapitalize="none"
-              />
-            </View>
-          }
-        />
-      )}
+      <BookmarkList
+        bookmarks={data.bookmarks}
+        header={
+          <View>
+            <PageTitle title="Search" />
+            <Input
+              placeholder="Search"
+              className="mx-4 bg-white"
+              value={search}
+              onChangeText={setSearch}
+              autoFocus
+              autoCapitalize="none"
+            />
+          </View>
+        }
+        onRefresh={onRefresh}
+        isRefreshing={isPending}
+      />
     </SafeAreaView>
   );
 }