From ac626a9c2edc2e528eb0b39002c836a747b2fc16 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Mon, 16 Mar 2026 14:13:26 +0100
Subject: feat: enhance geolocation handling with loading state and improve
 button click behavior

---
 src/frontend/app/hooks/useGeolocation.ts | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

(limited to 'src/frontend/app/hooks')

diff --git a/src/frontend/app/hooks/useGeolocation.ts b/src/frontend/app/hooks/useGeolocation.ts
index 878420b..78e9096 100644
--- a/src/frontend/app/hooks/useGeolocation.ts
+++ b/src/frontend/app/hooks/useGeolocation.ts
@@ -1,16 +1,18 @@
-import { useCallback } from "react";
-import { useMap } from "../contexts/MapContext";
 import type { LngLatLike } from "maplibre-gl";
+import { useCallback, useState } from "react";
+import { useMap } from "../contexts/MapContext";
 
 export interface UseGeolocationResult {
   userLocation: { latitude: number; longitude: number } | null;
   hasLocationPermission: boolean;
+  isLoading: boolean;
   requestLocation: () => void;
 }
 
-function lngLatToCoords(
-  loc: LngLatLike
-): { latitude: number; longitude: number } {
+function lngLatToCoords(loc: LngLatLike): {
+  latitude: number;
+  longitude: number;
+} {
   if (Array.isArray(loc)) {
     // This codebase stores location as [latitude, longitude] (not the standard
     // MapLibre [lng, lat] GeoJSON order). See MapContext.tsx where arrays are
@@ -36,16 +38,20 @@ function lngLatToCoords(
  */
 export function useGeolocation(): UseGeolocationResult {
   const { mapState, setUserLocation, setLocationPermission } = useMap();
+  const [isLoading, setIsLoading] = useState(false);
 
   const requestLocation = useCallback(() => {
     if (typeof window === "undefined" || !("geolocation" in navigator)) return;
+    setIsLoading(true);
     navigator.geolocation.getCurrentPosition(
       (pos) => {
         setUserLocation([pos.coords.latitude, pos.coords.longitude]);
         setLocationPermission(true);
+        setIsLoading(false);
       },
       () => {
         setLocationPermission(false);
+        setIsLoading(false);
       },
       { enableHighAccuracy: false, maximumAge: 60000, timeout: 10000 }
     );
@@ -57,6 +63,7 @@ export function useGeolocation(): UseGeolocationResult {
   return {
     userLocation,
     hasLocationPermission: mapState.hasLocationPermission,
+    isLoading,
     requestLocation,
   };
 }
-- 
cgit v1.3