diff --git a/src/index.css b/src/index.css
index b2e925b..f5d1c3a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -395,6 +395,20 @@
   }
 }
 
+/* Indeterminate top loading bar for the map ("Loading spots"). A short segment
+   sweeps left→right on a faint track, so it reads as active work without
+   pretending to know real progress. Disabled under reduced-motion. */
+@keyframes ssLoadBar {
+  0%   { transform: translateX(-120%); }
+  100% { transform: translateX(420%); }
+}
+.ss-loadbar {
+  animation: ssLoadBar 1.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ss-loadbar { animation: none; width: 100%; opacity: 0.7; }
+}
+
 .animate-fadeIn {
   animation: fadeIn 0.4s ease-out forwards;
 }
diff --git a/src/pages/MapPage.tsx b/src/pages/MapPage.tsx
index 50f0e6f..639c7ef 100644
--- a/src/pages/MapPage.tsx
+++ b/src/pages/MapPage.tsx
@@ -85,7 +85,6 @@ import { useToast } from '@/hooks/useToast';
 import { cn } from '@/lib/utils';
 import { getCurrentPosition, GeolocationError, isNativeGeolocation } from '@/lib/geolocation';
 import { getLastLocation } from '@/lib/lastLocation';
-import { MapSkeletonPins } from '@/components/MapSkeletonPins';
 
 
 type ViewMode = 'map' | 'list';
@@ -1615,18 +1614,30 @@ export default function MapPage() {
                   userLocation={userLocation ? { lat: userLocation.lat, lng: userLocation.lon } : null}
                 />
               </Suspense>
-              {/* Loading indicator — slim top edge bar */}
+              {/* Loading indicator — a slim, honest top bar. The map stays
+                  visible underneath and spots stream in; we NEVER cover the map
+                  with fake placeholder pins. An animated sweep sits on top of a
+                  faint track so it reads as "working", plus a small labeled pill
+                  during a genuine cold start (no markers yet) so the user knows
+                  we're talking to the relays. */}
               {isLoading && (
-                <div className="absolute top-0 left-0 right-0 z-[1000] h-0.5">
-                  <div className="h-full bg-gradient-to-r from-[#ff0040] via-[#ff6600] to-[#ccff00] animate-pulse" />
-                </div>
+                <>
+                  <div className="absolute top-0 left-0 right-0 z-[1001] h-[3px] overflow-hidden bg-white/5">
+                    <div className="ss-loadbar h-full w-1/3 bg-gradient-to-r from-[#ff0040] via-[#ff6600] to-[#ccff00]" />
+                  </div>
+                  {mapSpots.length === 0 && (
+                    <div className="absolute top-3 left-1/2 -translate-x-1/2 z-[1001]">
+                      <div className="flex items-center gap-2 rounded-full bg-black/60 px-3.5 py-1.5 backdrop-blur-md ring-1 ring-white/10 shadow-lg">
+                        <span className="h-3.5 w-3.5 rounded-full border-2 border-[#ccff00]/30 border-t-[#ccff00] animate-spin" />
+                        <span className="font-mono text-[10px] uppercase tracking-[0.22em] text-white/70">
+                          Loading spots
+                        </span>
+                      </div>
+                    </div>
+                  )}
+                </>
               )}
 
-              {/* Cold-start skeleton: only while genuinely loading with NO
-                  markers on the map yet. The instant real (or cached) spots
-                  render, mapSpots.length > 0 and this disappears — no blank map. */}
-              {isLoading && mapSpots.length === 0 && <MapSkeletonPins />}
-
 
 
               {/* Map attribution — bottom-left, sits ABOVE the mobile bottom