Improve loading states + hack fix seemingly spurious issue with code mirror ranges

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
+                    {isLoading ? (
-                        fileMatches={fileMatches}
+                        <div className="flex flex-col items-center justify-center h-full gap-2">
-                        onOpenFileMatch={(fileMatch) => {
+                            <SymbolIcon className="h-6 w-6 animate-spin" />
-                            setSelectedFile(fileMatch);
+                            <p className="font-semibold text-center">Searching...</p>
-                        }}
+                        </div>
-                        onMatchIndexChanged={(matchIndex) => {
+                    ) : (
-                            setSelectedMatchIndex(matchIndex);
+                        <SearchResultsPanel
-                        }}
+                            fileMatches={fileMatches}
-                    />
+                            onOpenFileMatch={(fileMatch) => {
+                                setSelectedFile(fileMatch);
+                            }}
+                            onMatchIndexChanged={(matchIndex) => {
+                                setSelectedMatchIndex(matchIndex);
+                            }}
+                        />
+                    )}
                 </ResizablePanel>
                 <ResizableHandle withHandle={selectedFile !== undefined} />
                 <ResizablePanel

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) => (

src/hooks/useExtensionWithDependency.ts

@@ -17,9 +17,17 @@ export function useExtensionWithDependency(
 
     useEffect(() => {
         if (view) {
-            view.dispatch({
+            try {
-                effects: compartment.reconfigure(extensionFactory()),
+                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);