From 9c6b78700cd704eab23a563c6f3664a293ab9d1a Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Fri, 6 Dec 2024 10:45:26 +0530
Subject: [PATCH] fix: location

---
 .../dashboard/components-next/message/Message.vue      |  6 ++++--
 .../components-next/message/bubbles/Location.vue       | 10 ++++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/javascript/dashboard/components-next/message/Message.vue b/app/javascript/dashboard/components-next/message/Message.vue
index d9f38d699..de9495cf3 100644
--- a/app/javascript/dashboard/components-next/message/Message.vue
+++ b/app/javascript/dashboard/components-next/message/Message.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import { provideMessageContext } from './provider.js';
 import {
   MESSAGE_TYPES,
@@ -21,7 +21,9 @@ import VideoBubble from './bubbles/Video.vue';
 import InstagramStoryBubble from './bubbles/InstagramStory.vue';
 import AttachmentsBubble from './bubbles/Attachments.vue';
 import EmailBubble from './bubbles/Email/Index.vue';
-import LocationBubble from './bubbles/Location.vue';
+const LocationBubble = defineAsyncComponent(
+  () => import('./bubbles/Location.vue')
+);
 import UnsupportedBubble from './bubbles/Unsupported.vue';
 
 import MessageError from './MessageError.vue';
diff --git a/app/javascript/dashboard/components-next/message/bubbles/Location.vue b/app/javascript/dashboard/components-next/message/bubbles/Location.vue
index 5a18a9f6c..df034324b 100644
--- a/app/javascript/dashboard/components-next/message/bubbles/Location.vue
+++ b/app/javascript/dashboard/components-next/message/bubbles/Location.vue
@@ -49,10 +49,9 @@ const mapUrl = computed(
   () => `https://maps.google.com/?q=${lat.value},${long.value}`
 );
 
-const setupMap = async () => {
-  await nextTick();
+const setupMap = () => {
   const map = new maplibregl.Map({
-    style: 'https://tiles.openfreemap.org/styles/liberty',
+    style: 'https://tiles.openfreemap.org/styles/positron',
     center: [long.value, lat.value],
     zoom: 9.5,
     container: 'map',
@@ -69,7 +68,10 @@ const setupMap = async () => {
   return map;
 };
 
-onMounted(setupMap);
+onMounted(async () => {
+  await nextTick();
+  setupMap();
+});
 </script>
 
 <template>