Improve component stability and user experience with safety checks

Implement robust error handling, safety checks for data structures, and state management improvements across various components to prevent runtime errors and enhance user experience.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: a71e826a-1d38-4b6e-a34f-fbf5ba1f1b25
Replit-Commit-Checkpoint-Type: intermediate_checkpoint

src/components/search/AutocompleteSearch.tsx

@@ -296,7 +296,7 @@ export function AutocompleteSearch({
         )}
       </div>
 
-      {isOpen && displayItems.length > 0 && (
+      {isOpen && (displayItems.length > 0 || loading) && (
         <div className={`absolute top-full mt-1 left-0 right-0 bg-popover border border-border rounded-lg shadow-xl z-[100] max-h-96 overflow-y-auto ${isHero ? 'max-w-2xl mx-auto' : ''}`}>
           <div className="p-2">
             {query.length === 0 && showRecentSearches && suggestions.length > 0 && (
@@ -316,7 +316,7 @@ export function AutocompleteSearch({
               </>
             )}
 
-            {displayItems.map((item, index) => (
+            {displayItems.length > 0 && displayItems.map((item, index) => (
               <div
                 key={item.id}
                 onClick={() => handleResultClick(item)}
@@ -364,10 +364,11 @@ export function AutocompleteSearch({
             {loading && (
               <div className="flex items-center justify-center p-4">
                 <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
+                <span className="text-sm text-muted-foreground ml-2">Searching...</span>
               </div>
             )}
 
-            {query.length > 0 && results.length > 0 && (
+            {query.length > 0 && results.length > 0 && !loading && (
               <>
                 <Separator className="my-2" />
                 <Button