diff --git a/components/map/CommonMap.vue b/components/map/CommonMap.vue
index 57f286af..1189242b 100644
--- a/components/map/CommonMap.vue
+++ b/components/map/CommonMap.vue
@@ -432,6 +432,11 @@
         required: true,
         default: false,
       },
+      tilesLoaded: {
+        type: Boolean as PropType<boolean>,
+        required: true,
+        default: false,
+      },
     },
     setup(props, { emit }: SetupContext) {
       const { $config } = useContext();
@@ -501,24 +506,44 @@
       function mapLoaded(e: { map: Map }): void {
         map = e.map;
         state.map.bbox = map.getBounds().toArray();
-        emit('update:loaded', true);
-        emit('update:style-changed', true);
         emit('update:bounds', state.map.bbox);
-        /**
-         * This is required because we want
-         * to persist the layers on the map
-         * even after the basemap is changed
-         */
-        map.on('style.load', () => {
-          const waiting = () => {
-            if (!map.isStyleLoaded()) {
-              emit('update:style-changed', false);
-              setTimeout(waiting, 200);
-            } else {
-              emit('update:style-changed', true);
+        const events: string[] = [
+          'style.load',
+          'sourcedata',
+          'sourcedataloading',
+        ];
+        events.forEach((event) => {
+          // Sets map into loading state when tiles starts loading
+          map.on(event, () => {
+            // Sets map into loaded when tiles are loaded
+            if (event === 'sourcedata' || event === 'sourcedataloading') {
+              const waiting = () => {
+                if (!map.areTilesLoaded()) {
+                  emit('update:tiles-loaded', false);
+                  setTimeout(waiting, 200);
+                } else {
+                  emit('update:tiles-loaded', true);
+                }
+              };
+              waiting();
+            }
+            if (event === 'style.load') {
+              /**
+               * This is required because we want
+               * to persist the layers on the map
+               * even after the basemap is changed
+               */
+              const waiting = () => {
+                if (!map.isStyleLoaded()) {
+                  emit('update:style-changed', false);
+                  setTimeout(waiting, 200);
+                } else {
+                  emit('update:style-changed', true);
+                }
+              };
+              waiting();
             }
-          };
-          waiting();
+          });
         });
         /**
          * Watch the pitchend event
@@ -532,6 +557,9 @@
             10,
           );
         });
+        emit('update:loaded', true);
+        emit('update:style-changed', true);
+        emit('update:tiles-loaded', true);
       }
       /**
        * This function emits a click event to the
diff --git a/pages/index.vue b/pages/index.vue
index 4013490f..eb7f07ca 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -39,6 +39,7 @@
       :class="{ 'opacity-50': loading }"
       :loaded.sync="state.map.loaded"
       :style-changed.sync="state.map.styleChanged"
+      :tiles-loaded.sync="state.map.tilesLoaded"
       :center.sync="state.map.center"
       @click="mapClicked"
     >
@@ -486,6 +487,7 @@
         map: {
           loaded: false as boolean,
           styleChanged: false as boolean,
+          tilesLoaded: false as boolean,
           center: [73.8567, 18.5204],
           marker: {
             center: [] as number[],
@@ -507,7 +509,10 @@
         },
       });
       const loading = computed(
-        () => !state.map.loaded || !state.map.styleChanged,
+        () =>
+          !state.map.loaded ||
+          !state.map.styleChanged ||
+          !state.map.tilesLoaded,
       );
 
       onMounted(() => {