From 40dc6adbd1057588a80865884ce41497f201cd4a Mon Sep 17 00:00:00 2001
From: Shubham <yadav105shubham@gmail.com>
Date: Mon, 8 Nov 2021 00:13:41 +0530
Subject: [PATCH] Add debounce for onClick handler Save button

---
 package-lock.json                | 1 +
 package.json                     | 1 +
 src/components/Typing/Typing.jsx | 9 +++++++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a02216e..d81ad5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "grapheme-splitter": "^1.0.4",
         "highlight.js": "^11.2.0",
         "i": "^0.3.7",
+        "lodash.debounce": "^4.0.8",
         "npm": "^8.1.0",
         "react": "^17.0.2",
         "react-copy-to-clipboard": "^5.0.3",
diff --git a/package.json b/package.json
index 8b15a19..7fefc25 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "grapheme-splitter": "^1.0.4",
     "highlight.js": "^11.2.0",
     "i": "^0.3.7",
+    "lodash.debounce": "^4.0.8",
     "npm": "^8.1.0",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.3",
diff --git a/src/components/Typing/Typing.jsx b/src/components/Typing/Typing.jsx
index c0d0797..20468e3 100644
--- a/src/components/Typing/Typing.jsx
+++ b/src/components/Typing/Typing.jsx
@@ -1,14 +1,19 @@
-import React, {useState, useEffect} from "react";
+import React, {useState, useEffect, useMemo} from "react";
 import style from "./Typing.module.css";
 import hljs from 'highlight.js';
 import ReactQuill from 'react-quill';
 import Button from "../Button/Button";
 import 'react-quill/dist/quill.snow.css';
 import 'highlight.js/styles/atom-one-light.css';
+import debounce from 'lodash.debounce';
 
 const Typing = ({ handleInputChange, onSubmit }) => {
   const [value, setValue] = useState();
 
+  const debouncedOnSubmit = useMemo(() => {
+    return debounce(onSubmit, 300);
+  }, [onSubmit]);
+
   useEffect(() => { 
     hljs.configure({useBR: false});
   }, []);
@@ -31,7 +36,7 @@ const Typing = ({ handleInputChange, onSubmit }) => {
           }} className={style.textarea} theme="snow" value={value} onChange={setValue} placeholder="Start typing here!" />
         </div>
         <div className={style.share}>
-          <Button name="Save" onClick={onSubmit} />
+          <Button name="Save" onClick={debouncedOnSubmit} />
         </div>
       </div>
   </div>