move onRenderComplete logic to embeddable

nreese · nreese · commit 03578efc213e · 2023-03-22T15:31:30.000-06:00
diff --git a/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx b/x-pack/plugins/maps/public/embeddable/map_embeddable.tsx
@@ -12,6 +12,7 @@ import { Provider } from 'react-redux';
 import fastIsEqual from 'fast-deep-equal';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { Subscription } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, skip, startWith } from 'rxjs/operators';
 import { Unsubscribe } from 'redux';
 import { EuiEmptyPrompt } from '@elastic/eui';
 import { type Filter } from '@kbn/es-query';
@@ -68,6 +69,7 @@ import {
   getFullPath,
   MAP_SAVED_OBJECT_TYPE,
   RawValue,
+  RENDER_TIMEOUT,
 } from '../../common/constants';
 import { RenderToolTipContent } from '../classes/tooltips/tooltip_property';
 import {
@@ -130,6 +132,7 @@ export class MapEmbeddable
   private _onInitialRenderComplete?: () => void = undefined;
   private _hasInitialRenderCompleteFired = false;
   private _isSharable = true;
+  private readonly _onRenderComplete$;
 
   constructor(config: MapEmbeddableConfig, initialInput: MapEmbeddableInput, parent?: IContainer) {
     super(
@@ -147,6 +150,19 @@ export class MapEmbeddable
     this._initializeSaveMap();
     this._subscriptions.push(this.getUpdated$().subscribe(() => this.onUpdate()));
     this._controlledBy = getControlledBy(this.id);
+
+    this._onRenderComplete$ = this.getOutput$().pipe(
+      // wrapping distinctUntilChanged with startWith and skip to prime distinctUntilChanged with an initial value.
+      startWith(this.getOutput()),
+      distinctUntilChanged((a, b) => a.loading === b.loading),
+      skip(1),
+      debounceTime(RENDER_TIMEOUT),
+      filter(output => !output.loading)
+    );
+  }
+
+  public getOnRenderComplete$() {
+    return this._onRenderComplete$;
   }
 
   public reportsEmbeddableLoad() {
diff --git a/x-pack/plugins/maps/public/lens/passive_map.tsx b/x-pack/plugins/maps/public/lens/passive_map.tsx
@@ -6,15 +6,12 @@
  */
 
 import React, { Component, RefObject } from 'react';
-import { debounce } from 'lodash';
 import { Subscription } from 'rxjs';
-import { distinctUntilChanged, skip, startWith } from 'rxjs/operators';
 import { v4 as uuidv4 } from 'uuid';
 import { EuiLoadingChart } from '@elastic/eui';
 import { EmbeddableFactory, ViewMode } from '@kbn/embeddable-plugin/public';
 import type { LayerDescriptor } from '../../common/descriptor_types';
 import { INITIAL_LOCATION } from '../../common';
-import { RENDER_TIMEOUT } from '../../common/constants';
 import { MapEmbeddable, MapEmbeddableInput, MapEmbeddableOutput } from '../embeddable';
 import { createBasemapLayerDescriptor } from '../classes/layers/create_basemap_layer_descriptor';
 
@@ -39,7 +36,7 @@ export class PassiveMap extends Component<Props, State> {
   private _isMounted = false;
   private _prevPassiveLayer = this.props.passiveLayer;
   private readonly _embeddableRef: RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>();
-  private _outputSubscription: Subscription | undefined;
+  private _onRenderSubscription: Subscription | undefined;
 
   state: State = { mapEmbeddable: null };
 
@@ -53,8 +50,8 @@ export class PassiveMap extends Component<Props, State> {
     if (this.state.mapEmbeddable) {
       this.state.mapEmbeddable.destroy();
     }
-    if (this._outputSubscription) {
-      this._outputSubscription.unsubscribe();
+    if (this._onRenderSubscription) {
+      this._onRenderSubscription.unsubscribe();
     }
   }
 
@@ -65,14 +62,6 @@ export class PassiveMap extends Component<Props, State> {
     }
   }
 
-  _onRenderComplete = debounce(() => {
-    if (!this._isMounted) {
-      return;
-    }
-
-    this.props.onRenderComplete();
-  }, RENDER_TIMEOUT);
-
   async _setupEmbeddable() {
     const basemapLayerDescriptor = createBasemapLayerDescriptor();
     const intialLayers = basemapLayerDescriptor ? [basemapLayerDescriptor] : [];
@@ -101,19 +90,11 @@ export class PassiveMap extends Component<Props, State> {
       return;
     }
 
-    this._outputSubscription = mapEmbeddable
-      .getOutput$()
-      .pipe(
-        // wrapping distinctUntilChanged with startWith and skip to prime distinctUntilChanged with an initial value.
-        startWith(mapEmbeddable.getOutput()),
-        distinctUntilChanged((a, b) => a.loading === b.loading),
-        skip(1)
-      )
-      .subscribe((output) => {
-        if (output.loading) {
-          this._onRenderComplete.cancel();
-        } else {
-          this._onRenderComplete();
+    this._onRenderSubscription = mapEmbeddable
+      .getOnRenderComplete$()
+      .subscribe(() => {
+        if (this._isMounted) {
+          this.props.onRenderComplete();
         }
       });
 
