From 0e6dac64407375d53a65338cc2a49196d41d8773 Mon Sep 17 00:00:00 2001
From: Sudo-Ivan <ivan@quad4.io>
Date: Fri, 2 Jan 2026 17:25:36 -0600
Subject: [PATCH] feat(MapPage): add loading skeleton for map and track loading
 state

---
 meshchatx/src/frontend/components/map/MapPage.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/meshchatx/src/frontend/components/map/MapPage.vue b/meshchatx/src/frontend/components/map/MapPage.vue
index cedf028..fa567da 100644
--- a/meshchatx/src/frontend/components/map/MapPage.vue
+++ b/meshchatx/src/frontend/components/map/MapPage.vue
@@ -140,6 +140,13 @@
 
             <div ref="mapContainer" class="absolute inset-0" :class="{ 'cursor-crosshair': isExportMode }"></div>
 
+            <!-- loading skeleton for map -->
+            <div v-if="!isMapLoaded" class="absolute inset-0 z-0 bg-slate-100 dark:bg-zinc-900 animate-pulse">
+                <div class="grid grid-cols-4 grid-rows-4 h-full w-full gap-1 p-1 opacity-20">
+                    <div v-for="i in 16" :key="i" class="bg-slate-300 dark:bg-zinc-700 rounded-lg"></div>
+                </div>
+            </div>
+
             <!-- telemetry marker overlay -->
             <div
                 v-if="selectedMarker"
@@ -718,6 +725,7 @@ export default {
             // MBTiles management
             mbtilesList: [],
             mbtilesDir: "",
+            isMapLoaded: false,
         };
     },
     computed: {
@@ -909,6 +917,7 @@ export default {
             });
 
             this.map.addInteraction(this.dragBox);
+            this.isMapLoaded = true;
         },
         isLocalUrl(url) {
             if (!url) return false;