perf(Preview): Debounce live document preview generation for better UX

desktop/package.json

@@ -46,6 +46,7 @@
     "@stencil/router": "2.0.0-2",
     "@stencil/store": "1.4.1",
     "@stencila/dev-config": "1.4.131",
+    "@types/debounce": "1.2.0",
     "@types/jest": "26.0.24",
     "@types/puppeteer": "5.4.4",
     "@types/uuid": "8.3.1",
@@ -80,6 +81,7 @@
     "@stencila/brand": "0.7.1",
     "@stencila/components": "0.38.0",
     "@stencila/schema": "1.10.0",
+    "debounce": "1.2.1",
     "electron-squirrel-startup": "1.0.0",
     "fp-ts": "2.10.5",
     "i18next": "20.3.2",

desktop/src/renderer/components/app-document/app-document-editor/app-document-editor.tsx

@@ -1,5 +1,6 @@
 import { EntityId } from '@reduxjs/toolkit'
 import { Component, Element, h, Host, Prop, Watch } from '@stencil/core'
+import { debounce } from 'debounce'
 import { option as O } from 'fp-ts'
 import { pipe } from 'fp-ts/function'
 import { DocumentEvent } from 'stencila'
@@ -118,14 +119,20 @@ export class AppDocumentEditor {
     })
   }
 
+  /**
+   * The number of milliseconds to wait between consecutive calls of the document update handler.
+   * Allows us to avoid generating too many previews as the user is typing, and degrading performance.
+   */
+  onDocChangeTimeout = 300
+
   /**
    * Function to call whenever the contents of the editor change.
    */
-  private onDocChange = () => {
+  private onDocChange = debounce(() => {
     this.editorRef
       ?.getContents()
       .then((contents) => client.documents.load(this.documentId, contents.text))
-  }
+  }, this.onDocChangeTimeout)
 
   private fileFormatToLanguage = (): string => {
     const file = selectDoc(state)(this.documentId)