perf(googleMaps): avoid multiple rerenders when adding markers to clusterer (#517)

Author: DamianGlowala

src/runtime/components/GoogleMaps/ScriptGoogleMapsMarker.vue

@@ -62,7 +62,9 @@ whenever(() => mapContext?.map.value && mapContext.mapsApi.value, () => {
   setupMarkerEventListeners(marker.value)
 
   if (markerClustererContext?.markerClusterer.value) {
-    markerClustererContext.markerClusterer.value.addMarker(marker.value)
+    markerClustererContext.markerClusterer.value.addMarker(marker.value, true)
+
+    markerClustererContext.requestRerender()
   }
   else {
     marker.value.setMap(mapContext!.map.value!)
@@ -88,7 +90,7 @@ onUnmounted(() => {
   if (markerClustererContext?.markerClusterer.value) {
     markerClustererContext.markerClusterer.value.removeMarker(marker.value, true)
 
-    markerClustererContext.reportMarkerRemoval()
+    markerClustererContext.requestRerender()
   }
   else {
     marker.value.setMap(null)

src/runtime/components/GoogleMaps/ScriptGoogleMapsMarkerClusterer.vue

@@ -4,13 +4,13 @@
 
 <script lang="ts">
 import { MarkerClusterer, type MarkerClustererOptions } from '@googlemaps/markerclusterer'
-import { inject, onUnmounted, provide, ref, shallowRef, type InjectionKey, type ShallowRef } from 'vue'
+import { inject, onUnmounted, provide, shallowRef, type InjectionKey, type ShallowRef } from 'vue'
 import { whenever } from '@vueuse/core'
 import { MAP_INJECTION_KEY } from './ScriptGoogleMaps.vue'
 
 export const MARKER_CLUSTERER_INJECTION_KEY = Symbol('marker-clusterer') as InjectionKey<{
   markerClusterer: ShallowRef<MarkerClusterer | undefined>
-  reportMarkerRemoval: () => void
+  requestRerender: () => void
 }>
 </script>
 
@@ -45,9 +45,9 @@ whenever(() => mapContext?.map.value, (map) => {
   once: true,
 })
 
-const markerClustererNeedsRerender = ref(false)
+const markerClustererNeedsRerender = shallowRef(false)
 
-function reportMarkerRemoval() {
+function requestRerender() {
   markerClustererNeedsRerender.value = true
 }
 
@@ -67,7 +67,13 @@ onUnmounted(() => {
   markerClusterer.value.setMap(null)
 })
 
-provide(MARKER_CLUSTERER_INJECTION_KEY, { markerClusterer, reportMarkerRemoval })
+provide(
+  MARKER_CLUSTERER_INJECTION_KEY,
+  {
+    markerClusterer,
+    requestRerender,
+  },
+)
 
 function setupMarkerClustererEventListeners(markerClusterer: MarkerClusterer) {
   markerClustererEvents.forEach((event) => {