Implement debouncing to optimize text error handling

Previously, texts with numerous errors could cause performance issues due to the high frequency of function calls. With the new debouncing implementation, we effectively limit the rate at which the error handling function executes, thereby reducing potential lagginess and improving the overall user experience.

service2.js

@@ -26,6 +26,7 @@ class BesService {
     this.hostElement = hostElement
     this.results = [] // Results of grammar-checking, one per each block/paragraph of text
     this.createCorrectionPanel()
+    this.firstCall = true
 
     // Disable browser built-in spell-checker to prevent collision with our grammar markup.
     this.originalSpellcheck = this.hostElement.spellcheck
@@ -774,7 +775,16 @@ class BesDOMService extends BesTreeService {
    */
   onInput() {
     // Now that the text is done changing, we can correctly calculate markup position.
-    this.repositionAllMarkup()
+    // This is a way to resolve lagginess in repositioning markup with many mistakes.
+    if (this.firstCall) {
+      this.repositionAllMarkup()
+      this.firstCall = false
+    }
+    clearTimeout(this.debounceTimer)
+    this.debounceTimer = setTimeout(() => {
+      this.repositionAllMarkup()
+      this.firstCall = true
+    }, 300)
 
     // Defer grammar-checking to reduce stress on grammar-checking server.
     this.timer = setTimeout(() => {