Add skeletons to filter panel when search is streaming

Author: brendan-kellam

packages/web/src/app/[domain]/search/components/filterPanel/filter.tsx

@@ -5,13 +5,15 @@ import { compareEntries, Entry } from "./entry";
 import { Input } from "@/components/ui/input";
 import Fuse from "fuse.js";
 import { cn } from "@/lib/utils"
+import { Skeleton } from "@/components/ui/skeleton";
 
 interface FilterProps {
     title: string,
     searchPlaceholder: string,
     entries: Entry[],
     onEntryClicked: (key: string) => void,
     className?: string,
+    isStreaming: boolean,
 }
 
 export const Filter = ({
@@ -20,6 +22,7 @@ export const Filter = ({
     entries,
     onEntryClicked,
     className,
+    isStreaming,
 }: FilterProps) => {
     const [searchFilter, setSearchFilter] = useState<string>("");
 
@@ -43,27 +46,34 @@ export const Filter = ({
             className
         )}>
             <h2 className="text-sm font-semibold">{title}</h2>
-            <div className="pr-1">
-                <Input
-                    placeholder={searchPlaceholder}
-                    className="h-8"
-                    onChange={(event) => setSearchFilter(event.target.value)}
-                />
-            </div>
-
-            <div
-                className="flex flex-col gap-0.5 text-sm overflow-scroll no-scrollbar"
-            >
-                {filteredEntries
-                    .sort((entryA, entryB) => compareEntries(entryB, entryA))
-                    .map((entry) => (
-                        <Entry
-                            key={entry.key}
-                            entry={entry}
-                            onClicked={() => onEntryClicked(entry.key)}
+            {(isStreaming && entries.length === 0) ? (
+                <Skeleton className="h-12 w-full" />
+            ) : (
+                <>
+                    <div className="pr-1">
+                        <Input
+                            placeholder={searchPlaceholder}
+                            className="h-8"
+                            onChange={(event) => setSearchFilter(event.target.value)}
                         />
-                    ))}
-            </div>
+                    </div>
+
+                    <div
+                        className="flex flex-col gap-0.5 text-sm overflow-scroll no-scrollbar"
+                    >
+                        {filteredEntries
+                            .sort((entryA, entryB) => compareEntries(entryB, entryA))
+                            .map((entry) => (
+                                <Entry
+                                    key={entry.key}
+                                    entry={entry}
+                                    onClicked={() => onEntryClicked(entry.key)}
+                                />
+                            ))}
+                    </div>
+                </>
+            )}
+
         </div>
     )
 }

packages/web/src/app/[domain]/search/components/filterPanel/index.tsx

@@ -16,6 +16,7 @@ interface FilePanelProps {
     matches: SearchResultFile[];
     repoInfo: Record<number, RepositoryInfo>;
     onFilterChange?: () => void;
+    isStreaming: boolean;
 }
 
 /**
@@ -33,11 +34,13 @@ interface FilePanelProps {
  * @param matches - Array of search result files to filter
  * @param repoInfo - Information about repositories including their display names and icons
  * @param onFilterChange - Optional callback that is called whenever a filter is applied or removed
+ * @param isStreaming - Whether the search is streaming
  */
 export const FilterPanel = ({
     matches,
     repoInfo,
     onFilterChange,
+    isStreaming,
 }: FilePanelProps) => {
     const router = useRouter();
     const searchParams = useSearchParams();
@@ -155,6 +158,7 @@ export const FilterPanel = ({
                     }
                 }}
                 className="max-h-[50%]"
+                isStreaming={isStreaming}
             />
             <Filter
                 title="Filter By Language"
@@ -178,6 +182,7 @@ export const FilterPanel = ({
                     }
                 }}
                 className="overflow-auto"
+                isStreaming={isStreaming}
             />
         </div>
     )

packages/web/src/app/[domain]/search/components/searchResultsPage.tsx

@@ -249,6 +249,7 @@ const PanelGroup = ({
                 <FilterPanel
                     matches={fileMatches}
                     repoInfo={repoInfo}
+                    isStreaming={isStreaming}
                     onFilterChange={() => {
                         searchResultsPanelRef.current?.resetScroll();
                     }}