Fix: Improve preview loading and error handling

src/App.tsx

@@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { AuthProvider } from "@/hooks/useAuth";
 import { LocationAutoDetectProvider } from "@/components/providers/LocationAutoDetectProvider";
+import { ErrorBoundary } from "@/components/ErrorBoundary";
 import { Footer } from "@/components/layout/Footer";
 import Index from "./pages/Index";
 import Parks from "./pages/Parks";
@@ -116,6 +117,7 @@ function AppContent() {
 }
 
 const App = () => (
+  <ErrorBoundary>
     <QueryClientProvider client={queryClient}>
       <AuthProvider>
         <LocationAutoDetectProvider>
@@ -123,6 +125,7 @@ const App = () => (
         </LocationAutoDetectProvider>
       </AuthProvider>
     </QueryClientProvider>
+  </ErrorBoundary>
 );
 
 export default App;

src/components/ErrorBoundary.tsx

@@ -0,0 +1,55 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import { AlertCircle } from 'lucide-react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('ErrorBoundary caught an error:', error, errorInfo);
+  }
+
+  private handleReset = () => {
+    this.setState({ hasError: false, error: undefined });
+    window.location.reload();
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      return (
+        <div className="min-h-screen flex items-center justify-center p-4 bg-background">
+          <Alert variant="destructive" className="max-w-lg">
+            <AlertCircle className="h-4 w-4" />
+            <AlertTitle>Something went wrong</AlertTitle>
+            <AlertDescription className="mt-2">
+              <p className="mb-4">
+                {this.state.error?.message || 'An unexpected error occurred'}
+              </p>
+              <Button onClick={this.handleReset} variant="outline">
+                Reload Page
+              </Button>
+            </AlertDescription>
+          </Alert>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

src/hooks/useLocationAutoDetect.ts

@@ -24,6 +24,9 @@ export function useLocationAutoDetect() {
     // Only run auto-detection after preferences have loaded
     if (loading) return;
     
+    // Defer auto-detection to not block initial render
+    const timeoutId = setTimeout(() => {
+      try {
         // Check if localStorage is available
         if (!isLocalStorageAvailable()) {
           console.warn('localStorage is not available, skipping location auto-detection');
@@ -46,5 +49,11 @@ export function useLocationAutoDetect() {
             }
           });
         }
-  }, [user, loading, preferences.auto_detect]);
+      } catch (error) {
+        console.error('❌ Error in location auto-detection:', error);
+      }
+    }, 1000); // Defer by 1 second to allow app to render first
+
+    return () => clearTimeout(timeoutId);
+  }, [user, loading, preferences.auto_detect, autoDetectPreferences]);
 }

src/hooks/useUnitPreferences.ts

@@ -15,7 +15,25 @@ export function useUnitPreferences() {
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
-    loadPreferences();
+    let mounted = true;
+    
+    const load = async () => {
+      try {
+        await loadPreferences();
+      } catch (error) {
+        console.error('Failed to load preferences:', error);
+      } finally {
+        if (mounted) {
+          setLoading(false);
+        }
+      }
+    };
+    
+    load();
+    
+    return () => {
+      mounted = false;
+    };
   }, [user]);
 
   const loadPreferences = async () => {
@@ -58,7 +76,15 @@ export function useUnitPreferences() {
 
   const autoDetectPreferences = useCallback(async () => {
     try {
-      const response = await supabase.functions.invoke('detect-location');
+      // Add timeout to prevent hanging
+      const timeoutPromise = new Promise((_, reject) => 
+        setTimeout(() => reject(new Error('Location detection timeout')), 5000)
+      );
+      
+      const response = await Promise.race([
+        supabase.functions.invoke('detect-location'),
+        timeoutPromise
+      ]) as any;
       
       if (response.data && response.data.measurementSystem) {
         const newPreferences: UnitPreferences = {