I have a very simple loading message:

<div v-show="isLoading" class="preloader">Loading...</div>

data() {
  return {
    isLoading: false
  }
},

In a child component method that adds markers to a map using the Google Maps API, I’m changing the attribute value using $emit:

methods: {
  async initMarkers() {
    this.$emit('loading', true)
    const map = this.map
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker')

    try {
      this.members.map((member) => {
        const marker = new AdvancedMarkerElement({
          map,
          title: member.ttl,
          position: {
            lat: parseFloat(member.lat),
            lng: parseFloat(member.lng)
          }
        })

        this.markers.push(marker)
      })
    } catch (error) {
      console.error('Error loading marker library', error)
    } finally {
      this.$emit('loading', false)
    }
  },
}

The process takes about 2 seconds to complete, but the loading message is not being displayed. It only appears when I add a delay of at least 1ms.

this.$emit('loading', true)
await new Promise((resolve) => setTimeout(resolve, 1))
try{

I would like to understand why this delay is necessary and if it is considered bad practice.