From 20d1a90e65d08c16f30d8d9adac005dda7f4dad1 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Wed, 20 Mar 2024 17:56:22 +0000
Subject: fix(mobile): Fix flicker on search

---
 apps/mobile/app/dashboard/(tabs)/index.tsx  |  4 +--
 apps/mobile/app/dashboard/(tabs)/search.tsx | 49 ++++++++++++++++-------------
 2 files changed, 30 insertions(+), 23 deletions(-)

(limited to 'apps/mobile/app/dashboard/(tabs)')

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>
   );
 }
-- 
cgit v1.2.3-70-g09d2