feat: add pink route fetching banner and loading state management

- Introduced a new PinkRouteFetchingBanner component to display a loading state while fetching routes.
- Updated MapPage and PinkLineMapPage to manage the fetching state and conditionally render the banner.
- Enhanced CSS styles for the fetching banner to improve user experience during route computation.

Author: noamjgal

src/index.css

@@ -877,6 +877,54 @@ a:hover {
   z-index: 1002;
 }
 
+.pink-route-fetch-container {
+  z-index: 1003;
+  pointer-events: none;
+}
+
+.pink-route-fetch-inner {
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 10px;
+  width: auto;
+  min-width: 0;
+  max-width: min(320px, calc(100vw - 24px));
+}
+
+.pink-route-fetch-inner.shape-name-input-form {
+  padding: 6px 10px;
+  gap: 6px;
+  align-items: center;
+}
+
+.pink-route-fetch-spinner {
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 28px;
+  height: 28px;
+  border: 2px solid rgba(255, 255, 255, 0.22);
+  border-top-color: #ff69b4;
+  border-radius: 50%;
+  animation: pink-route-fetch-spin 0.65s linear infinite;
+}
+
+.pink-route-fetch-label {
+  color: rgba(255, 255, 255, 0.92);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.25;
+  text-align: center;
+  white-space: normal;
+}
+
+@keyframes pink-route-fetch-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
 .shape-name-input-form {
   background: rgba(20, 20, 20, 0.4);
   backdrop-filter: blur(12px);

src/pages/MapPage/PinkLineMapPage.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
@@ -17,6 +17,7 @@ import {
 } from "../../utils/pinkLineRoute";
 import supabase from "../../supabase";
 import PinkLineNodeForm from "./PinkLineNodeForm";
+import PinkRouteFetchingBanner from "./PinkRouteFetchingBanner";
 import { computeRouteViaEdgeFunction } from "../../services/googleRoutes";
 import { addParkingLotsLayer } from "../../utils/parkingLayer";
 
@@ -70,7 +71,13 @@ const PinkLineMapPage = () => {
   const [integratedRoute, setIntegratedRoute] = useState<IntegratedRoute | null>(null);
   const [routeForPersistence, setRouteForPersistence] = useState<Array<[number, number]>>([]);
   const [routeError, setRouteError] = useState<string | null>(null);
+  const [isFetchingPinkRoute, setIsFetchingPinkRoute] = useState(false);
   const busyRef = useRef(false);
+
+  const pinkUserPointsKey = useMemo(
+    () => JSON.stringify(nodes.map((n) => [n.lat, n.lng])),
+    [nodes]
+  );
   const pendingMarkerRef = useRef<L.Marker | null>(null);
   const parkingLayerRef = useRef<L.LayerGroup | null>(null);
 
@@ -214,14 +221,23 @@ const PinkLineMapPage = () => {
     const rebuildRoute = async () => {
       const basePaths = defaultLinePathsRef.current;
       if (basePaths.length === 0) {
+        setIsFetchingPinkRoute(false);
         setIntegratedRoute(null);
         setRouteForPersistence([]);
         setRouteError(null);
         return;
       }
 
-      const userPoints = nodes.map((n) => [n.lat, n.lng] as [number, number]);
+      const userPoints = JSON.parse(pinkUserPointsKey) as [number, number][];
+      const willCallGoogle = userPoints.length > 0;
+      if (!willCallGoogle) {
+        setIsFetchingPinkRoute(false);
+      }
+
       try {
+        if (willCallGoogle) {
+          setIsFetchingPinkRoute(true);
+        }
         const route = await buildIntegratedRouteWithGoogleDetours(basePaths, userPoints, {
           computeRoute: async (waypoints) => {
             const computed = await computeRouteViaEdgeFunction(waypoints);
@@ -239,6 +255,10 @@ const PinkLineMapPage = () => {
         setIntegratedRoute(null);
         setRouteForPersistence([]);
         setRouteError("Failed to compute route using Google Routes. Please adjust points and try again.");
+      } finally {
+        if (!cancelled && willCallGoogle) {
+          setIsFetchingPinkRoute(false);
+        }
       }
     };
 
@@ -247,7 +267,7 @@ const PinkLineMapPage = () => {
     return () => {
       cancelled = true;
     };
-  }, [nodes, defaultLineLoaded, project?.id]);
+  }, [pinkUserPointsKey, defaultLineLoaded, project?.id]);
 
   // Single rendering effect: clears ALL visuals, then redraws from scratch.
   // Every pink polyline on the map comes from routeLayersRef — nothing else.
@@ -440,6 +460,9 @@ const PinkLineMapPage = () => {
           onCancel={() => setPendingNode(null)}
         />
       )}
+      {!pendingNode && (isSubmitting || isFetchingPinkRoute) && (
+        <PinkRouteFetchingBanner variant={isSubmitting ? "submit" : "route"} />
+      )}
       <div
         style={{
           position: "absolute",

src/pages/MapPage/PinkRouteFetchingBanner.tsx

@@ -0,0 +1,31 @@
+type PinkRouteFetchingBannerVariant = "route" | "submit";
+
+const LABELS: Record<PinkRouteFetchingBannerVariant, { text: string; aria: string }> = {
+  route: { text: "טוען מסלול…", aria: "טוען מסלול" },
+  submit: { text: "שומר במסד הנתונים…", aria: "שומר במסד הנתונים" },
+};
+
+interface PinkRouteFetchingBannerProps {
+  variant: PinkRouteFetchingBannerVariant;
+}
+
+const PinkRouteFetchingBanner = ({ variant }: PinkRouteFetchingBannerProps) => {
+  const { text, aria } = LABELS[variant];
+  return (
+    <div
+      className="shape-name-input-container pink-route-fetch-container"
+      role="status"
+      aria-live="polite"
+      aria-label={aria}
+    >
+      <div className="shape-name-input-form pink-route-fetch-inner">
+        <span className="pink-route-fetch-spinner" aria-hidden />
+        <span className="pink-route-fetch-label" dir="rtl">
+          {text}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default PinkRouteFetchingBanner;

src/pages/MapPage/index.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom";
 import L from "leaflet";
 import "leaflet/dist/leaflet.css";
 import PinkLineNodeForm from "./PinkLineNodeForm";
+import PinkRouteFetchingBanner from "./PinkRouteFetchingBanner";
 import MemorialSiteForm from "./MemorialSiteForm";
 import localMemorialIconUrl from "../../assets/memorial-sites/local-memorial-site.png";
 import regionalMemorialIconUrl from "../../assets/memorial-sites/regional-memorial-site.png";
@@ -100,6 +101,12 @@ const MapPage = () => {
   const [integratedPinkRoute, setIntegratedPinkRoute] = useState<IntegratedRoute | null>(null);
   const [pinkRouteForPersistence, setPinkRouteForPersistence] = useState<Array<[number, number]>>([]);
   const [pinkRouteError, setPinkRouteError] = useState<string | null>(null);
+  const [isFetchingPinkRoute, setIsFetchingPinkRoute] = useState(false);
+
+  const pinkUserPointsKey = useMemo(
+    () => JSON.stringify(pinkNodes.map((n) => [n.lat, n.lng])),
+    [pinkNodes]
+  );
 
   const [submissionBatches, setSubmissionBatches] = useState<SubmissionBatchSummary[]>([]);
   const [submissionBatchesLoading, setSubmissionBatchesLoading] = useState(false);
@@ -306,14 +313,23 @@ const MapPage = () => {
 
     const rebuildPinkRoute = async () => {
       if (!defaultLineLoaded || defaultLinePathsRef.current.length === 0) {
+        setIsFetchingPinkRoute(false);
         setIntegratedPinkRoute(null);
         setPinkRouteForPersistence([]);
         setPinkRouteError(null);
         return;
       }
 
-      const userPoints = pinkNodes.map((n) => [n.lat, n.lng] as [number, number]);
+      const userPoints = JSON.parse(pinkUserPointsKey) as [number, number][];
+      const willCallGoogle = userPoints.length > 0;
+      if (!willCallGoogle) {
+        setIsFetchingPinkRoute(false);
+      }
+
       try {
+        if (willCallGoogle) {
+          setIsFetchingPinkRoute(true);
+        }
         const route = await buildIntegratedRouteWithGoogleDetours(defaultLinePathsRef.current, userPoints, {
           computeRoute: async (waypoints) => {
             const computed = await computeRouteViaEdgeFunction(waypoints);
@@ -331,6 +347,10 @@ const MapPage = () => {
         setIntegratedPinkRoute(null);
         setPinkRouteForPersistence([]);
         setPinkRouteError("Failed to compute route using Google Routes. Please adjust points and try again.");
+      } finally {
+        if (!cancelled && willCallGoogle) {
+          setIsFetchingPinkRoute(false);
+        }
       }
     };
 
@@ -339,7 +359,7 @@ const MapPage = () => {
     return () => {
       cancelled = true;
     };
-  }, [pinkNodes, defaultLineLoaded, pinkProjectId]);
+  }, [pinkUserPointsKey, defaultLineLoaded, pinkProjectId]);
 
   useEffect(() => {
     if (!mapRef.current) return;
@@ -851,6 +871,12 @@ const MapPage = () => {
     <>
       <div id="map" style={{ height: "100vh", width: "100%" }} />
 
+      {!pendingPinkTarget &&
+        !pendingMemorialTarget &&
+        (submitting || isFetchingPinkRoute) && (
+          <PinkRouteFetchingBanner variant={submitting ? "submit" : "route"} />
+        )}
+
       {pendingPinkTarget && (
         <PinkLineNodeForm
           onSubmit={(name, description) => {