From 5b9261e13e7c78668c5345e81f46aacbfb63c751 Mon Sep 17 00:00:00 2001
From: Alf Eaton <alf.eaton@overleaf.com>
Date: Mon, 31 Oct 2022 13:09:43 +0000
Subject: [PATCH] Dispatch `doc:changed` and `doc:saved` events in a debounced
 timeout (#10024)

GitOrigin-RevId: a55602b448d8b97f224c658fee0a97d2473f8cd1
---
 .../web/frontend/js/ide/editor/Document.js    | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/services/web/frontend/js/ide/editor/Document.js b/services/web/frontend/js/ide/editor/Document.js
index 01769c5081..e2f6555ce2 100644
--- a/services/web/frontend/js/ide/editor/Document.js
+++ b/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)
       })
     }