feat: add debounce handling for submit comments

Signed-off-by: Ryan Wang <[email protected]>
halo-dev · Sep 13, 2024 · ec8059d · ec8059d
1 parent 844b269
commit ec8059d
Show file tree

Hide file tree

Showing 3 changed files with 1,245 additions and 1,000 deletions.
diff --git a/packages/comment-widget/package.json b/packages/comment-widget/package.json
@@ -39,9 +39,11 @@
     "dayjs": "^1.11.10",
     "emoji-mart": "^5.5.2",
     "javascript-time-ago": "^2.5.9",
-    "lit": "^3.1.2"
+    "lit": "^3.1.2",
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
     "lit-analyzer": "^2.0.3"
   }
 }
diff --git a/packages/comment-widget/src/base-form.ts b/packages/comment-widget/src/base-form.ts
@@ -3,6 +3,7 @@ import { consume } from '@lit/context';
 import { css, html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { createRef, Ref, ref } from 'lit/directives/ref.js';
+import { debounce } from 'lodash-es';
 import {
   allowAnonymousCommentsContext,
   baseUrlContext,
@@ -254,6 +255,13 @@ export class BaseForm extends LitElement {
     `;
   }
 
+  private debouncedSubmit = debounce((data: Record<string, unknown>) => {
+    const event = new CustomEvent('submit', {
+      detail: data,
+    });
+    this.dispatchEvent(event);
+  }, 300);
+
   onSubmit(e: Event) {
     e.preventDefault();
     const form = e.target as HTMLFormElement;
@@ -270,10 +278,7 @@ export class BaseForm extends LitElement {
       })
     );
 
-    const event = new CustomEvent('submit', {
-      detail: data,
-    });
-    this.dispatchEvent(event);
+    this.debouncedSubmit(data);
   }
 
   resetForm() {