fix: location

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';

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>