Dispatch `doc:changed` and `doc:saved` events in a debounced timeout (#10024)

GitOrigin-RevId: a55602b448d8b97f224c658fee0a97d2473f8cd1

services/web/frontend/js/ide/editor/Document.js

@@ -704,21 +704,36 @@ export default Document = (function () {
           v: version,
         })
       })
+
+      let docChangedTimeout
       this.doc.on('change', (ops, oldSnapshot, msg) => {
         this._applyOpsToRanges(ops, oldSnapshot, msg)
-        window.dispatchEvent(
-          new CustomEvent('doc:changed', { detail: { id: this.doc_id } })
-        )
-        return this.ide.$scope.$emit('doc:changed', { doc_id: this.doc_id })
+        if (docChangedTimeout) {
+          window.clearTimeout(docChangedTimeout)
+        }
+        docChangedTimeout = window.setTimeout(() => {
+          window.dispatchEvent(
+            new CustomEvent('doc:changed', { detail: { id: this.doc_id } })
+          )
+          this.ide.$scope.$emit('doc:changed', { doc_id: this.doc_id })
+        }, 50)
       })
+
       this.doc.on('flipped_pending_to_inflight', () => {
         return this.trigger('flipped_pending_to_inflight')
       })
-      return this.doc.on('saved', () => {
-        window.dispatchEvent(
-          new CustomEvent('doc:saved', { detail: { id: this.doc_id } })
-        )
-        return this.ide.$scope.$emit('doc:saved', { doc_id: this.doc_id })
+
+      let docSavedTimeout
+      this.doc.on('saved', () => {
+        if (docSavedTimeout) {
+          window.clearTimeout(docSavedTimeout)
+        }
+        docSavedTimeout = window.setTimeout(() => {
+          window.dispatchEvent(
+            new CustomEvent('doc:saved', { detail: { id: this.doc_id } })
+          )
+          this.ide.$scope.$emit('doc:saved', { doc_id: this.doc_id })
+        }, 50)
       })
     }