From d39c164228234cc80917114bf4fb45c0ec080bf3 Mon Sep 17 00:00:00 2001
From: Corey Johnson <probablycorey@gmail.com>
Date: Thu, 3 Jul 2025 08:10:16 -0700
Subject: [PATCH] debounce

---
 packages/http/src/routes/todos/[id].tsx |  6 +++++-
 packages/shared/src/utils.ts            | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/http/src/routes/todos/[id].tsx b/packages/http/src/routes/todos/[id].tsx
index 31ce01d..dfb2191 100644
--- a/packages/http/src/routes/todos/[id].tsx
+++ b/packages/http/src/routes/todos/[id].tsx
@@ -2,6 +2,7 @@ import KV from "@workshop/shared/kv"
 import { submitAction, useAction, type Head, type LoaderProps } from "@workshop/nano-remix"
 import { useCallback } from "hono/jsx/dom"
 import { TodoEditor } from "@workshop/todo"
+import { debounce } from "@workshop/shared/utils"
 
 export const head: Head = {
   title: "Todos",
@@ -24,10 +25,13 @@ export const action = async (req: Request, params: { id: string }) => {
   return { success: true }
 }
 
+const debounceSubmit = debounce((todos: string) => submitAction({ todos }), 2000)
+
 export default ({ todos }: LoaderProps<typeof loader>) => {
   const { error } = useAction<typeof action>()
+
   const handleChange = useCallback(async (newTodos: string) => {
-    submitAction({ todos: newTodos })
+    debounceSubmit(newTodos)
   }, [])
 
   return (
diff --git a/packages/shared/src/utils.ts b/packages/shared/src/utils.ts
index d293250..91b5d20 100644
--- a/packages/shared/src/utils.ts
+++ b/packages/shared/src/utils.ts
@@ -35,3 +35,19 @@ export const timeBomb = (date: string, message: string) => {
 }
 
 export const zone = "America/Los_Angeles"
+
+export const debounce = <T extends (...args: any[]) => void>(
+  func: T,
+  wait: number
+): ((...args: Parameters<T>) => void) => {
+  let timeout: any
+
+  return (...args: Parameters<T>) => {
+    if (timeout) clearTimeout(timeout)
+
+    timeout = setTimeout(() => {
+      func(...args)
+      timeout = undefined
+    }, wait)
+  }
+}