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,13 +117,15 @@ function AppContent() {
 }
 
 const App = () => (
-  <QueryClientProvider client={queryClient}>
+  <ErrorBoundary>
-    <AuthProvider>
+    <QueryClientProvider client={queryClient}>
-      <LocationAutoDetectProvider>
+      <AuthProvider>
-        <AppContent />
+        <LocationAutoDetectProvider>
-      </LocationAutoDetectProvider>
+          <AppContent />
-    </AuthProvider>
+        </LocationAutoDetectProvider>
-  </QueryClientProvider>
+      </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,27 +24,36 @@ export function useLocationAutoDetect() {
     // Only run auto-detection after preferences have loaded
     if (loading) return;
     
-    // Check if localStorage is available
+    // Defer auto-detection to not block initial render
-    if (!isLocalStorageAvailable()) {
+    const timeoutId = setTimeout(() => {
-      console.warn('localStorage is not available, skipping location auto-detection');
+      try {
-      return;
+        // Check if localStorage is available
-    }
+        if (!isLocalStorageAvailable()) {
-    
+          console.warn('localStorage is not available, skipping location auto-detection');
-    // Check if we've already attempted detection
+          return;
-    const hasAttemptedDetection = localStorage.getItem('location_detection_attempted');
-    
-    // Auto-detect if we haven't attempted it yet and auto_detect is enabled
-    if (preferences.auto_detect && !hasAttemptedDetection) {
-      autoDetectPreferences().then(() => {
-        if (isLocalStorageAvailable()) {
-          localStorage.setItem('location_detection_attempted', 'true');
         }
-      }).catch((error) => {
+        
-        console.error('❌ Failed to auto-detect location:', error);
+        // Check if we've already attempted detection
-        if (isLocalStorageAvailable()) {
+        const hasAttemptedDetection = localStorage.getItem('location_detection_attempted');
-          localStorage.setItem('location_detection_attempted', 'true');
+        
+        // Auto-detect if we haven't attempted it yet and auto_detect is enabled
+        if (preferences.auto_detect && !hasAttemptedDetection) {
+          autoDetectPreferences().then(() => {
+            if (isLocalStorageAvailable()) {
+              localStorage.setItem('location_detection_attempted', 'true');
+            }
+          }).catch((error) => {
+            console.error('❌ Failed to auto-detect location:', error);
+            if (isLocalStorageAvailable()) {
+              localStorage.setItem('location_detection_attempted', 'true');
+            }
+          });
         }
-      });
+      } catch (error) {
-    }
+        console.error('❌ Error in location auto-detection:', error);
-  }, [user, loading, preferences.auto_detect]);
+      }
+    }, 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 = {