From 6904bce96b9d4ec346cfa4620bd0152bb8553810 Mon Sep 17 00:00:00 2001
From: Henry <henry_ball@hotmail.co.uk>
Date: Wed, 1 Oct 2025 21:42:56 +0100
Subject: [PATCH] feat: use placeholder data in search results

---
 apps/web/src/components/CommandPallette.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/CommandPallette.tsx b/apps/web/src/components/CommandPallette.tsx
index 8119b8a1..5e1e6f7a 100644
--- a/apps/web/src/components/CommandPallette.tsx
+++ b/apps/web/src/components/CommandPallette.tsx
@@ -45,12 +45,13 @@ export default function CommandPallette({
   const { workspace } = useWorkspace();
 
   // Debounce to avoid too many reqs
-  const [debouncedQuery] = useDebounce(query, 500);
+  const [debouncedQuery] = useDebounce(query, 300);
 
   const {
     data: searchResults,
     isLoading,
     isFetched,
+    isPlaceholderData,
   } = api.workspace.search.useQuery(
     {
       workspacePublicId: workspace.publicId,
@@ -58,10 +59,16 @@ export default function CommandPallette({
     },
     {
       enabled: Boolean(workspace.publicId && debouncedQuery.trim().length > 0),
+      placeholderData: (previousData) => previousData,
     },
   );
 
-  const results = (searchResults ?? []) as SearchResult[];
+  // Clear results when query is empty, otherwise show search results
+  const results =
+    debouncedQuery.trim().length === 0
+      ? []
+      : ((searchResults ?? []) as SearchResult[]);
+
   const hasSearched = Boolean(debouncedQuery.trim().length > 0 && isFetched);
 
   return (
@@ -102,7 +109,9 @@ export default function CommandPallette({
               {results.length > 0 && (
                 <ComboboxOptions
                   static
-                  className="max-h-72 scroll-py-2 overflow-y-auto py-2"
+                  className={`max-h-72 scroll-py-2 overflow-y-auto py-2 ${
+                    isPlaceholderData ? "opacity-75" : ""
+                  }`}
                 >
                   {results.map((result) => (
                     <ComboboxOption