[v11.3.x] Dashboards: Fixes performance issue expanding a row (#95321)

Dashboards: Fixes performance issue expanding a row  (#95311)

* DashboardScene: Optimize change detection

* Remove arg

* remove console log

(cherry picked from commit 3523289e98)

Co-authored-by: Torkel Ödegaard <torkel@grafana.com>

public/app/features/dashboard-scene/saving/DashboardSceneChangeTracker.ts

@@ -1,3 +1,4 @@
+import { debounce } from 'lodash';
 import { Unsubscribable } from 'rxjs';
 
 import {
@@ -120,12 +121,6 @@ export class DashboardSceneChangeTracker {
     return false;
   }
 
-  private onStateChanged(event: SceneObjectStateChangedEvent) {
-    if (DashboardSceneChangeTracker.isUpdatingPersistedState(event)) {
-      this.detectSaveModelChanges();
-    }
-  }
-
   private detectSaveModelChanges() {
     const changedDashboard = transformSceneToSaveModel(this._dashboard);
     const initialDashboard = this._dashboard.getInitialSaveModel();
@@ -165,13 +160,20 @@ export class DashboardSceneChangeTracker {
     if (!this._changesWorker) {
       this.init();
     }
+
     this._changesWorker!.onmessage = (e: MessageEvent<DashboardChangeInfo>) => {
       this.updateIsDirty(e.data);
     };
 
+    const performSaveModelDiff = getChangeTrackerDebouncer(this.detectSaveModelChanges.bind(this));
+
     this._changeTrackerSub = this._dashboard.subscribeToEvent(
       SceneObjectStateChangedEvent,
-      this.onStateChanged.bind(this)
+      (event: SceneObjectStateChangedEvent) => {
+        if (DashboardSceneChangeTracker.isUpdatingPersistedState(event)) {
+          performSaveModelDiff();
+        }
+      }
     );
   }
 
@@ -185,3 +187,14 @@ export class DashboardSceneChangeTracker {
     this._changesWorker = undefined;
   }
 }
+
+/**
+ * The debouncer makes unit tests slower and more complex so turning it off for unit tests
+ */
+function getChangeTrackerDebouncer(fn: () => void) {
+  if (process.env.NODE_ENV === 'test') {
+    return fn;
+  }
+
+  return debounce(fn, 250);
+}