From f5651515b2bf16f2df0edfa2fd8651ea6a76dfe8 Mon Sep 17 00:00:00 2001
From: bkellam <bshizzle1234@gmail.com>
Date: Tue, 24 Sep 2024 10:19:52 -0700
Subject: [PATCH] Improve loading states + hack fix seemingly spurious issue
 with code mirror ranges

---
 src/app/search/page.tsx                 | 28 ++++++++++++++-----------
 src/app/search/searchResultsPanel.tsx   |  9 ++++++++
 src/hooks/useExtensionWithDependency.ts | 14 ++++++++++---
 3 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index c1e6ed1f..b5616d3c 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -123,9 +123,6 @@ export default function SearchPage() {
                             size="sm"
                             defaultQuery={searchQuery}
                         />
-                        {isLoading && (
-                            <SymbolIcon className="h-4 w-4 animate-spin" />
-                        )}
                     </div>
                     <SettingsDropdown
                         menuButtonClassName="w-8 h-8"
@@ -155,15 +152,22 @@ export default function SearchPage() {
             {/* Search Results & Code Preview */}
             <ResizablePanelGroup direction="horizontal">
                 <ResizablePanel minSize={20}>
-                    <SearchResultsPanel
-                        fileMatches={fileMatches}
-                        onOpenFileMatch={(fileMatch) => {
-                            setSelectedFile(fileMatch);
-                        }}
-                        onMatchIndexChanged={(matchIndex) => {
-                            setSelectedMatchIndex(matchIndex);
-                        }}
-                    />
+                    {isLoading ? (
+                        <div className="flex flex-col items-center justify-center h-full gap-2">
+                            <SymbolIcon className="h-6 w-6 animate-spin" />
+                            <p className="font-semibold text-center">Searching...</p>
+                        </div>
+                    ) : (
+                        <SearchResultsPanel
+                            fileMatches={fileMatches}
+                            onOpenFileMatch={(fileMatch) => {
+                                setSelectedFile(fileMatch);
+                            }}
+                            onMatchIndexChanged={(matchIndex) => {
+                                setSelectedMatchIndex(matchIndex);
+                            }}
+                        />
+                    )}
                 </ResizablePanel>
                 <ResizableHandle withHandle={selectedFile !== undefined} />
                 <ResizablePanel
diff --git a/src/app/search/searchResultsPanel.tsx b/src/app/search/searchResultsPanel.tsx
index 79ee69c9..469f58c7 100644
--- a/src/app/search/searchResultsPanel.tsx
+++ b/src/app/search/searchResultsPanel.tsx
@@ -28,6 +28,15 @@ export const SearchResultsPanel = ({
     onOpenFileMatch,
     onMatchIndexChanged,
 }: SearchResultsPanelProps) => {
+
+    if (fileMatches.length === 0) {
+        return (
+            <div className="flex flex-col items-center justify-center h-full">
+                <p className="text-sm text-muted-foreground">No results found</p>
+            </div>
+        );
+    }
+
     return (
         <ScrollArea className="h-full">
             {fileMatches.map((fileMatch, index) => (
diff --git a/src/hooks/useExtensionWithDependency.ts b/src/hooks/useExtensionWithDependency.ts
index 7c6a0a4e..d29a521d 100644
--- a/src/hooks/useExtensionWithDependency.ts
+++ b/src/hooks/useExtensionWithDependency.ts
@@ -17,9 +17,17 @@ export function useExtensionWithDependency(
 
     useEffect(() => {
         if (view) {
-            view.dispatch({
-                effects: compartment.reconfigure(extensionFactory()),
-            });
+            try {
+                view.dispatch({
+                    effects: compartment.reconfigure(extensionFactory()),
+                });
+            
+            // @note: we were getting "RangeError: Position X is out of range for changeset of length Y" errors
+            // spuriously for some reason. This is a dirty hack to prevent codemirror from crashing the app
+            // in those cases.
+            } catch (error) {
+                console.error(error);
+            }
         }
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, deps);