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,6 +152,12 @@ export default function SearchPage() {
             {/* Search Results & Code Preview */}
             <ResizablePanelGroup direction="horizontal">
                 <ResizablePanel minSize={20}>
+                    {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) => {
@@ -164,6 +167,7 @@ export default function SearchPage() {
                                 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) {
+            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);