debounce

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 (

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)
+  }
+}