From 8c8e87761dd1f7dedd3b39faf901cb65187b29e4 Mon Sep 17 00:00:00 2001
From: PJ <ipriyanshujain@gmail.com>
Date: Mon, 17 Aug 2026 23:27:37 +0530
Subject: [PATCH] fix(folio-web): keep submit live for 400ms after saving

Defers the navigation back so the button is tappable while the label
reads Saved, widening the double-submit window the counting property
is there to catch.
---
 .../folio-web/src/pages/AddTransaction.tsx    | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/examples/folio-web/src/pages/AddTransaction.tsx b/examples/folio-web/src/pages/AddTransaction.tsx
index de612e5..30f0d6a 100644
--- a/examples/folio-web/src/pages/AddTransaction.tsx
+++ b/examples/folio-web/src/pages/AddTransaction.tsx
@@ -9,6 +9,8 @@ import { parseCents } from '../format'
 import { back, navigate } from '../router'
 import { BackButton, Header, Screen } from '../components/Screen'
 
+const SAVED_NOTICE_MILLIS = 400
+
 export function AddTransactionPage(props: {
   accountId: string
   onCreated: () => void
@@ -19,6 +21,7 @@ export function AddTransactionPage(props: {
   const [note, setNote] = useState('')
   const [err, setErr] = useState<string | null>(null)
   const [busy, setBusy] = useState(false)
+  const [saved, setSaved] = useState(false)
 
   useEffect(() => {
     let alive = true
@@ -30,6 +33,15 @@ export function AddTransactionPage(props: {
     }
   }, [props.accountId])
 
+  useEffect(() => {
+    if (!saved) return
+    const timer = window.setTimeout(
+      () => back(`/accounts/${props.accountId}`),
+      SAVED_NOTICE_MILLIS,
+    )
+    return () => window.clearTimeout(timer)
+  }, [saved, props.accountId])
+
   async function onSubmit(e: FormEvent) {
     e.preventDefault()
     if (busy) return
@@ -51,7 +63,7 @@ export function AddTransactionPage(props: {
         note,
       })
       props.onCreated()
-      back(`/accounts/${props.accountId}`)
+      setSaved(true)
     } catch (e) {
       setErr(e instanceof Error ? e.message : 'Could not save transaction')
     } finally {
@@ -85,6 +97,13 @@ export function AddTransactionPage(props: {
   }
 
   const submitDisabled = busy || amount.trim() === ''
+  const submitLabel = busy
+    ? 'Saving…'
+    : saved
+      ? 'Saved'
+      : type === 'credit'
+        ? 'Add credit'
+        : 'Add debit'
 
   return (
     <Screen
@@ -107,7 +126,7 @@ export function AddTransactionPage(props: {
           form="add-txn-form"
           disabled={submitDisabled}
         >
-          {busy ? 'Saving…' : type === 'credit' ? 'Add credit' : 'Add debit'}
+          {submitLabel}
         </button>
       }
     >