MapMarker component seems to lag significantly when being made conditionally visible

[CyberSekure]

Hey there,

I'm trying to use the MapboxDefaultMarker component to place a result on the map from a custom geocoder result.

My code is something similar to the below:

<MapboxMap
  map-id="main-map"
  :options="{
    style: 'mapbox://styles/mapbox/standard',
    center: center,
    zoom: zoom,
    minZoom: minZoom,
    maxZoom: maxZoom,
  }"
  class="h-full w-full"
>
  <MapboxDefaultMarker
    v-if="searchResultMarkerVisible"
    marker-id="search-result"
    :options="{ color: '#3b82f6', draggable: false }"
    :lnglat="searchResultMarkerCoords"
  >
  </MapboxDefaultMarker>
</MapboxMap>

<script setup>
const center = ref([0, 0]);
const zoom = ref(7);
const minZoom = 5;
const maxZoom = 18;

const handleGeocoderResultClicked = (result) => {
  searchResultMarkerCoords.value = result.center;
  searchResultMarkerVisible.value = true;
  mapRef.value?.flyTo({ center: result.center, zoom: 16 });
};

const handleGeocoderResultCleared = () => {
  searchResultMarkerVisible.value = false;
};
</script>

When I trigger either of the two above functions there's a definite delay with the responsiveness of the geocoder component and the map + marker. Is there some sort of delay that when the component turns visible?

If this helps, when I use a source layer instead of marker to display a point, there is zero lag/delay in updating it. I do this just by setting the data for the source to a point value mapRef.value?.getSource('search-result').setData(searchResultGeojson.value);

My guess is that this is due to the marker component rendering and the source option above works because it's already rendered and I'm just updating the data for it??

Fairly new to Nuxt so please let me know if I'm doing something wrong!

Many thanks

[CyberSekure]

I've found a workaround which is to set the lnglat of the marker initially to any co-ordinates and then update it using useMapboxMarker composable before making it visible with v-if. Hope this helps narrow down the issue!

[CyberSekure]

I think I found the problem here, when dev tools is enabled the lag is there, when it's turned off the lag is non-existent.