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/components/PlannerOverlay.tsx | 8 +++++---
 src/frontend/app/components/shared/AppMap.tsx  | 9 +++++----
 2 files changed, 10 insertions(+), 7 deletions(-)

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

diff --git a/src/frontend/app/components/PlannerOverlay.tsx b/src/frontend/app/components/PlannerOverlay.tsx
index d953c2e..d42bd94 100644
--- a/src/frontend/app/components/PlannerOverlay.tsx
+++ b/src/frontend/app/components/PlannerOverlay.tsx
@@ -534,7 +534,7 @@ export const PlannerOverlay: React.FC<PlannerOverlayProps> = ({
                   <button
                     type="button"
                     className="flex w-full items-center justify-between px-4 py-3 text-left hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-50 transition-colors duration-200"
-                    onClick={() => setOriginFromCurrentLocation}
+                    onClick={() => setOriginFromCurrentLocation()}
                     disabled={locationLoading}
                   >
                     <div className="flex items-center gap-2">
@@ -550,8 +550,10 @@ export const PlannerOverlay: React.FC<PlannerOverlayProps> = ({
                         </div>
                       </div>
                     </div>
-                    <div className="text-lg text-slate-600 dark:text-slate-400">
-                      {locationLoading ? "…" : ""}
+                    <div className="flex items-center">
+                      {locationLoading && (
+                        <div className="w-4 h-4 border-2 border-primary-500 border-t-transparent rounded-full animate-spin" />
+                      )}
                     </div>
                   </button>
                 </li>
diff --git a/src/frontend/app/components/shared/AppMap.tsx b/src/frontend/app/components/shared/AppMap.tsx
index f4c8658..8d0aa64 100644
--- a/src/frontend/app/components/shared/AppMap.tsx
+++ b/src/frontend/app/components/shared/AppMap.tsx
@@ -8,6 +8,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { useTranslation } from "react-i18next";
 import Map, {
   GeolocateControl,
   NavigationControl,
@@ -15,7 +16,6 @@ import Map, {
   type MapRef,
   type StyleSpecification,
 } from "react-map-gl/maplibre";
-import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router";
 import { useApp } from "~/AppContext";
 import { APP_CONSTANTS } from "~/config/constants";
@@ -82,7 +82,6 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
       mapState,
       updateMapState,
       setUserLocation,
-      setLocationPermission,
       showTraffic: settingsShowTraffic,
       showCameras: settingsShowCameras,
       mapPositionMode,
@@ -213,11 +212,13 @@ export const AppMap = forwardRef<MapRef, AppMapProps>(
         {showGeolocate && (
           <GeolocateControl
             position="bottom-right"
-            positionOptions={{ enableHighAccuracy: false }}
+            positionOptions={{
+              maximumAge: 1000 * 60 * 60 * 4,
+              enableHighAccuracy: false,
+            }}
             onGeolocate={(e) => {
               const { latitude, longitude } = e.coords;
               setUserLocation([latitude, longitude]);
-              setLocationPermission(true);
             }}
           />
         )}
-- 
cgit v1.3