fix(mobile): Fix flicker on search

6 files changed, 38 insertions, 31 deletions

diff --git a/apps/mobile/app/dashboard/(tabs)/index.tsx b/apps/mobile/app/dashboard/(tabs)/index.tsx
index a840ca93..18fb804d 100644
--- a/apps/mobile/app/dashboard/(tabs)/index.tsx
+++ b/apps/mobile/app/dashboard/(tabs)/index.tsx
@@ -2,7 +2,7 @@ import { Platform, SafeAreaView, View } from "react-native";
 import * as Haptics from "expo-haptics";
 import * as ImagePicker from "expo-image-picker";
 import { useRouter } from "expo-router";
-import BookmarkList from "@/components/bookmarks/BookmarkList";
+import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import PageTitle from "@/components/ui/PageTitle";
 import useAppSettings from "@/lib/settings";
 import { useUploadAsset } from "@/lib/upload";
@@ -80,7 +80,7 @@ function HeaderRight() {
 export default function Home() {
   return (
     <SafeAreaView>
-      <BookmarkList
+      <UpdatingBookmarkList
         query={{ archived: false }}
         header={
           <View className="flex flex-row justify-between">
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>
   );
 }
diff --git a/apps/mobile/app/dashboard/archive.tsx b/apps/mobile/app/dashboard/archive.tsx
index 98a03631..93841b9d 100644
--- a/apps/mobile/app/dashboard/archive.tsx
+++ b/apps/mobile/app/dashboard/archive.tsx
@@ -1,11 +1,11 @@
 import { SafeAreaView } from "react-native";
-import BookmarkList from "@/components/bookmarks/BookmarkList";
+import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import PageTitle from "@/components/ui/PageTitle";
 
 export default function Archive() {
   return (
     <SafeAreaView>
-      <BookmarkList query={{archived: true}} header={<PageTitle title="🗄️ Archive" />} />
+      <UpdatingBookmarkList query={{archived: true}} header={<PageTitle title="🗄️ Archive" />} />
     </SafeAreaView>
   );
 }
diff --git a/apps/mobile/app/dashboard/favourites.tsx b/apps/mobile/app/dashboard/favourites.tsx
index f62d561e..aebf3885 100644
--- a/apps/mobile/app/dashboard/favourites.tsx
+++ b/apps/mobile/app/dashboard/favourites.tsx
@@ -1,11 +1,11 @@
 import { SafeAreaView } from "react-native";
-import BookmarkList from "@/components/bookmarks/BookmarkList";
+import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import PageTitle from "@/components/ui/PageTitle";
 
 export default function Favourites() {
   return (
     <SafeAreaView>
-      <BookmarkList
+      <UpdatingBookmarkList
         query={{
           archived: false,
           favourited: true,
diff --git a/apps/mobile/app/dashboard/lists/[slug].tsx b/apps/mobile/app/dashboard/lists/[slug].tsx
index 8596b49f..2bb5d602 100644
--- a/apps/mobile/app/dashboard/lists/[slug].tsx
+++ b/apps/mobile/app/dashboard/lists/[slug].tsx
@@ -1,6 +1,6 @@
 import { SafeAreaView, View } from "react-native";
 import { Stack, useLocalSearchParams } from "expo-router";
-import BookmarkList from "@/components/bookmarks/BookmarkList";
+import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
@@ -23,7 +23,7 @@ export default function ListView() {
       />
       {list ? (
         <View>
-          <BookmarkList
+          <UpdatingBookmarkList
             query={{
               archived: false,
               listId: list.id,
diff --git a/apps/mobile/app/dashboard/tags/[slug].tsx b/apps/mobile/app/dashboard/tags/[slug].tsx
index cb6e2ef4..52c06129 100644
--- a/apps/mobile/app/dashboard/tags/[slug].tsx
+++ b/apps/mobile/app/dashboard/tags/[slug].tsx
@@ -1,6 +1,6 @@
 import { SafeAreaView, View } from "react-native";
 import { Stack, useLocalSearchParams } from "expo-router";
-import BookmarkList from "@/components/bookmarks/BookmarkList";
+import UpdatingBookmarkList from "@/components/bookmarks/UpdatingBookmarkList";
 import FullPageSpinner from "@/components/ui/FullPageSpinner";
 import PageTitle from "@/components/ui/PageTitle";
 import { api } from "@/lib/trpc";
@@ -24,7 +24,7 @@ export default function TagView() {
       />
       {tag ? (
         <View>
-          <BookmarkList
+          <UpdatingBookmarkList
             query={{
               archived: false,
               tagId: tag.id,