Fix: Improve preview loading and error handling

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
-    if (!isLocalStorageAvailable()) {
-      console.warn('localStorage is not available, skipping location auto-detection');
-      return;
-    }
-    
-    // Check if we've already attempted detection
-    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');
+    // 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');
+          return;
         }
-      }).catch((error) => {
-        console.error('❌ Failed to auto-detect location:', error);
-        if (isLocalStorageAvailable()) {
-          localStorage.setItem('location_detection_attempted', 'true');
+        
+        // Check if we've already attempted detection
+        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);
+            if (isLocalStorageAvailable()) {
+              localStorage.setItem('location_detection_attempted', 'true');
+            }
+          });
         }
-      });
-    }
-  }, [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 = {