Optimize location handling with faster default zip code fallback

Author: ZacharyLeahan

src/components/Explorer.vue

@@ -1029,40 +1029,75 @@ export default {
     this.manualZip = localStorage.getItem("manualZip") === "true";
     this.filterValues["States"] = [localStorage.getItem("state")];
 
+    // Pre-set the default zip code to ensure immediate response
+    if (!this.zipCode) {
+      this.zipCode = "19355";
+    }
+    
     if (!this.manualZip && "geolocation" in navigator) {
+      // Set loading state
+      this.isLoadingLocation = true;
+      
+      // Use a timeout to limit how long we wait for geolocation
+      const geolocationTimeout = setTimeout(() => {
+        if (this.isLoadingLocation) {
+          // If still loading after timeout, use default
+          this.isLoadingLocation = false;
+          this.setDefaultZipCode();
+        }
+      }, 2000); // 2 second timeout
+      
       navigator.geolocation.getCurrentPosition(
         async (position) => {
+          clearTimeout(geolocationTimeout);
+          
           const data = {
             latitude: position.coords.latitude,
             longitude: position.coords.longitude,
           };
 
-          const response = await fetch("/get-zip", {
-            method: "POST",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(data),
-          });
-          let json = await response.json();
-          this.zipCode = json.code;
-          this.filterValues["States"] = [json.state];
-          this.displayLocation = `${json.city}, ${json.state}`;
-
-          localStorage.setItem("zipCode", this.zipCode);
-          localStorage.setItem("state", json.state);
-          localStorage.setItem("displayLocation", this.displayLocation);
-          localStorage.removeItem("manualZip");
-        },
-        () => {
-          if (!this.zipCode) {
-            this.zipCode = "19355";
+          try {
+            const response = await fetch("/get-zip", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify(data),
+            });
+            
+            if (!response.ok) {
+              throw new Error('Network response was not ok');
+            }
+            
+            let json = await response.json();
+            this.zipCode = json.code;
+            this.filterValues["States"] = [json.state];
+            this.displayLocation = `${json.city}, ${json.state}`;
+
+            localStorage.setItem("zipCode", this.zipCode);
+            localStorage.setItem("state", json.state);
+            localStorage.setItem("displayLocation", this.displayLocation);
+            localStorage.removeItem("manualZip");
+          } catch (error) {
+            console.error("Error fetching zip code:", error);
+            this.setDefaultZipCode();
+          } finally {
+            this.isLoadingLocation = false;
           }
-        }
+        },
+        (error) => {
+          clearTimeout(geolocationTimeout);
+          console.error("Geolocation error:", error);
+          this.isLoadingLocation = false;
+          
+          // Use default zip code if geolocation fails
+          this.setDefaultZipCode();
+        },
+        { timeout: 3000, maximumAge: 60000 } // 3s timeout, cache for 1 minute
       );
-    } else if (!this.zipCode) {
+    } else if (!this.displayLocation) {
       // Geolocation not available or user chose manual zip
-      this.zipCode = "19355";
+      this.setDefaultZipCode();
     }
 
     await this.determineFilterCountsAndSubmit();
@@ -1072,6 +1107,33 @@ export default {
     document.body.removeEventListener("click", this.bodyClick);
   },
   methods: {
+    setDefaultZipCode() {
+      // Set default zip code to 19355 (Malvern, PA)
+      this.zipCode = "19355";
+      
+      // Get city and state info for this zip code
+      fetch("/get-city", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ zipCode: this.zipCode }),
+      })
+        .then(response => response.json())
+        .then(json => {
+          this.filterValues["States"] = [json.state];
+          this.displayLocation = `${json.city}, ${json.state}`;
+          
+          // Save to localStorage
+          localStorage.setItem("zipCode", this.zipCode);
+          localStorage.setItem("state", json.state);
+          localStorage.setItem("displayLocation", this.displayLocation);
+        })
+        .catch(error => {
+          console.error("Error fetching city data:", error);
+        });
+    },
+    
     forceUpdate() {
       // Force Vue to re-render by directly calling submit and manipulating the DOM
       this.submit();