Optimization render of cluster markers

jest.config.js

@@ -26,6 +26,7 @@ module.exports = {
     "!src/**/__tests__/**",
     "!src/shims-*.ts",
     "!src/themes/**",
+    "!src/components/DebouncedMarkerClusterer.ts",
   ],
   coverageThreshold: {
     global: {

mise.toml

@@ -0,0 +1,3 @@
+[tools]
+node = "20"
+pnpm = "10"

package.json

@@ -57,6 +57,7 @@
   "dependencies": {
     "@googlemaps/js-api-loader": "^1.16.2",
     "@googlemaps/markerclusterer": "^2.4.0",
+    "debounce": "^2.2.0",
     "fast-deep-equal": "^3.1.3"
   },
   "devDependencies": {

src/components/DebouncedMarkerClusterer.ts

@@ -0,0 +1,60 @@
+import { MarkerClusterer, MarkerClustererOptions } from "@googlemaps/markerclusterer";
+import debounce from "debounce";
+
+export class DebouncedMarkerClusterer extends MarkerClusterer {
+  private readonly debouncedRender: (() => void) & { clear(): void };
+
+  constructor(options: MarkerClustererOptions, debounceDelay = 10) {
+    super(options);
+
+    this.debouncedRender = debounce(() => {
+      super.render();
+    }, debounceDelay);
+  }
+
+  addMarker(marker: google.maps.Marker | google.maps.marker.AdvancedMarkerElement, noDraw?: boolean): void {
+    super.addMarker(marker, true);
+    if (!noDraw) {
+      this.debouncedRender();
+    }
+  }
+
+  removeMarker(marker: google.maps.Marker | google.maps.marker.AdvancedMarkerElement, noDraw?: boolean): boolean {
+    const result = super.removeMarker(marker, true);
+    if (!noDraw) {
+      this.debouncedRender();
+    }
+    return result;
+  }
+
+  addMarkers(markers: (google.maps.Marker | google.maps.marker.AdvancedMarkerElement)[], noDraw?: boolean): void {
+    super.addMarkers(markers, true);
+    if (!noDraw) {
+      this.debouncedRender();
+    }
+  }
+
+  removeMarkers(markers: (google.maps.Marker | google.maps.marker.AdvancedMarkerElement)[], noDraw?: boolean): boolean {
+    const result = super.removeMarkers(markers, true);
+    if (!noDraw) {
+      this.debouncedRender();
+    }
+    return result;
+  }
+
+  clearMarkers(noDraw?: boolean): void {
+    super.clearMarkers(true);
+    if (!noDraw) {
+      this.debouncedRender();
+    }
+  }
+
+  render(): void {
+    this.debouncedRender.clear();
+    super.render();
+  }
+
+  destroy(): void {
+    this.debouncedRender.clear();
+  }
+}

src/components/MarkerCluster.ts

@@ -6,6 +6,7 @@
   SuperClusterViewportAlgorithm,
 } from "@googlemaps/markerclusterer";
 import { mapSymbol, apiSymbol, markerClusterSymbol } from "../shared/index";
+import { DebouncedMarkerClusterer } from "./DebouncedMarkerClusterer";
 
 export interface IMarkerClusterExposed {
   markerCluster: Ref<MarkerClusterer | undefined>;
@@ -20,6 +21,10 @@
       type: Object as PropType<MarkerClustererOptions>,
       default: () => ({}),
     },
+    renderDebounceDelay: {
+      type: Number,
+      default: 10,
+    },
   },
   emits: markerClusterEvents,
   setup(props, { emit, expose, slots }) {
@@ -34,13 +39,13 @@
       () => {
         if (map.value) {
           markerCluster.value = markRaw(
-            new MarkerClusterer({
+            new DebouncedMarkerClusterer({
               map: map.value,
               // Better perf than the default `SuperClusterAlgorithm`. See:
               // https://github.com/googlemaps/js-markerclusterer/pull/640
               algorithm: new SuperClusterViewportAlgorithm(props.options.algorithmOptions ?? {}),
               ...props.options,
-            })
+            }, props.renderDebounceDelay)
           );
 
           markerClusterEvents.forEach((event) => {
@@ -58,6 +63,10 @@
         api.value?.event.clearInstanceListeners(markerCluster.value);
         markerCluster.value.clearMarkers();
         markerCluster.value.setMap(null);
+
+        if (markerCluster.value instanceof DebouncedMarkerClusterer) {
+          markerCluster.value.destroy();
+        }
       }
     });
 

src/components/__tests__/MarkerCluster.spec.ts

@@ -33,6 +33,34 @@ jest.mock("@googlemaps/markerclusterer", () => {
   };
 });
 
+let debouncedMarkerClustererConstructorSpy: jest.Mock | undefined;
+
+jest.mock("../DebouncedMarkerClusterer", () => {
+  return {
+    DebouncedMarkerClusterer: class {
+      addListener = jest.fn();
+      clearMarkers = jest.fn();
+      setMap = jest.fn();
+      private debouncedRender: any;
+
+      constructor(options: MarkerClustererOptions) {
+        if (debouncedMarkerClustererConstructorSpy) {
+          debouncedMarkerClustererConstructorSpy(options);
+        }
+        Object.assign(this, options);
+        this.debouncedRender = {
+          clear: jest.fn(),
+        };
+        mockMarkerClustererInstances.push(this);
+      }
+
+      destroy() {
+        this.debouncedRender.clear();
+      }
+    },
+  };
+});
+
 describe("MarkerCluster Component", () => {
   let mockMap: google.maps.Map;
   let mockApi: typeof google.maps;
@@ -50,6 +78,7 @@ describe("MarkerCluster Component", () => {
     mockMap = new Map(null);
 
     createMarkerClustererSpy = jest.fn();
+    debouncedMarkerClustererConstructorSpy = createMarkerClustererSpy;
     createSuperClusterViewportAlgorithmSpy = jest.fn();
 
     (MarkerClusterer as any) = class extends MarkerClusterer {