Merge pull request #383 from danditomaso/feat/debounce-messages-input

Add debounce to message input field

src/components/PageComponents/Messages/MessageInput.tsx

@@ -1,8 +1,10 @@
+import { debounce } from "@app/core/utils/debounce";
 import { Button } from "@components/UI/Button.tsx";
 import { Input } from "@components/UI/Input.tsx";
 import { useDevice } from "@core/stores/deviceStore.ts";
 import type { Types } from "@meshtastic/js";
 import { SendIcon } from "lucide-react";
+import { useCallback, useMemo, useState } from "react";
 
 export interface MessageInputProps {
   to: Types.Destination;
@@ -20,32 +22,46 @@ export const MessageInput = ({
     setMessageDraft,
     hardware,
   } = useDevice();
-
   const myNodeNum = hardware.myNodeNum;
+  const [localDraft, setLocalDraft] = useState(messageDraft);
 
-  const sendText = async (message: string) => {
+  const debouncedSetMessageDraft = useMemo(
-    await connection
+    () => debounce(setMessageDraft, 300),
-      ?.sendText(message, to, true, channel)
+    [setMessageDraft],
-      .then((id) =>
+  );
-        setMessageState(
+
-          to === "broadcast" ? "broadcast" : "direct",
+  const sendText = useCallback(
-          channel,
+    async (message: string) => {
-          to as number,
+      await connection
-          myNodeNum,
+        ?.sendText(message, to, true, channel)
-          id,
+        .then((id) =>
-          "ack",
+          setMessageState(
-        ),
+            to === "broadcast" ? "broadcast" : "direct",
-      )
+            channel,
-      .catch((e: Types.PacketError) =>
+            to as number,
-        setMessageState(
+            myNodeNum,
-          to === "broadcast" ? "broadcast" : "direct",
+            id,
-          channel,
+            "ack",
-          to as number,
+          ),
-          myNodeNum,
+        )
-          e.id,
+        .catch((e: Types.PacketError) =>
-          e.error,
+          setMessageState(
-        ),
+            to === "broadcast" ? "broadcast" : "direct",
-      );
+            channel,
+            to as number,
+            myNodeNum,
+            e.id,
+            e.error,
+          ),
+        );
+    },
+    [channel, connection, myNodeNum, setMessageState, to],
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    setLocalDraft(newValue);
+    debouncedSetMessageDraft(newValue);
   };
 
   return (
@@ -54,7 +70,8 @@ export const MessageInput = ({
         className="w-full"
         onSubmit={(e) => {
           e.preventDefault();
-          sendText(messageDraft);
+          sendText(localDraft);
+          setLocalDraft("");
           setMessageDraft("");
         }}
       >
@@ -64,8 +81,8 @@ export const MessageInput = ({
               autoFocus={true}
               minLength={1}
               placeholder="Enter Message"
-              value={messageDraft}
+              value={localDraft}
-              onChange={(e) => setMessageDraft(e.target.value)}
+              onChange={handleInputChange}
             />
           </span>
           <Button type="submit">

src/core/utils/debounce.ts

@@ -0,0 +1,13 @@
+type Callback<Args extends unknown[]> = (...args: Args) => void;
+
+export function debounce<Args extends unknown[]>(
+  callback: Callback<Args>,
+  wait: number,
+): Callback<Args> {
+  let timeoutId: ReturnType<typeof setTimeout>;
+
+  return (...args: Args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(() => callback(...args), wait);
+  };
+}