From 3304ed4733f7301a29231ee4f967e04fd7c10880 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 19 Mar 2024 02:41:17 +0000
Subject: fix: Remove flicker from search bar

---
 apps/web/app/dashboard/search/page.tsx               | 8 ++------
 apps/web/components/dashboard/search/SearchInput.tsx | 5 ++---
 2 files changed, 4 insertions(+), 9 deletions(-)

(limited to 'apps')

diff --git a/apps/web/app/dashboard/search/page.tsx b/apps/web/app/dashboard/search/page.tsx
index 62d42a43..76d23af2 100644
--- a/apps/web/app/dashboard/search/page.tsx
+++ b/apps/web/app/dashboard/search/page.tsx
@@ -8,18 +8,14 @@ import { useBookmarkSearch } from "@/lib/hooks/bookmark-search";
 import Loading from "../bookmarks/loading";
 
 function SearchComp() {
-  const { data, isPending, isPlaceholderData } = useBookmarkSearch();
+  const { data } = useBookmarkSearch();
 
   const inputRef: React.MutableRefObject<HTMLInputElement | null> =
     useRef<HTMLInputElement | null>(null);
 
   return (
     <div className="container flex flex-col gap-3 p-4">
-      <SearchInput
-        ref={inputRef}
-        autoFocus={true}
-        loading={isPending || isPlaceholderData}
-      />
+      <SearchInput ref={inputRef} autoFocus={true} />
       <hr />
       {data ? (
         <BookmarksGrid
diff --git a/apps/web/components/dashboard/search/SearchInput.tsx b/apps/web/components/dashboard/search/SearchInput.tsx
index 1ca6a0ae..0dd86c50 100644
--- a/apps/web/components/dashboard/search/SearchInput.tsx
+++ b/apps/web/components/dashboard/search/SearchInput.tsx
@@ -3,12 +3,11 @@
 import React from "react";
 import { Input } from "@/components/ui/input";
 import { useDoBookmarkSearch } from "@/lib/hooks/bookmark-search";
-import { cn } from "@/lib/utils";
 
 const SearchInput = React.forwardRef<
   HTMLInputElement,
   React.HTMLAttributes<HTMLInputElement> & { loading?: boolean }
->(({ className, loading = false, ...props }, ref) => {
+>(({ className, ...props }, ref) => {
   const { debounceSearch, searchQuery } = useDoBookmarkSearch();
 
   return (
@@ -17,7 +16,7 @@ const SearchInput = React.forwardRef<
       placeholder="Search"
       defaultValue={searchQuery}
       onChange={(e) => debounceSearch(e.target.value)}
-      className={cn(loading ? "animate-pulse-border" : undefined, className)}
+      className={className}
       {...props}
     />
   );
-- 
cgit v1.2.3-70-g09d2