getting rid of debounce

common/like.ts

@@ -6,3 +6,4 @@ export type Like = {
   tipTxnId?: string // only holds most recent tip txn id
 }
 export const LIKE_TIP_AMOUNT = 10
+export const TIP_UNDO_DURATION = 2000

web/components/contract/like-market-button.tsx

@@ -5,11 +5,12 @@ import { useUserLikes } from 'web/hooks/use-likes'
 import toast from 'react-hot-toast'
 import { formatMoney } from 'common/util/format'
 import { likeContract } from 'web/lib/firebase/likes'
-import { LIKE_TIP_AMOUNT } from 'common/like'
+import { LIKE_TIP_AMOUNT, TIP_UNDO_DURATION } from 'common/like'
 import { firebaseLogin } from 'web/lib/firebase/users'
 import { useMarketTipTxns } from 'web/hooks/use-tip-txns'
 import { sum } from 'lodash'
 import { TipButton } from './tip-button'
+import { TipToast } from '../tipper'
 
 export function LikeMarketButton(props: {
   contract: Contract
@@ -35,8 +36,20 @@ export function LikeMarketButton(props: {
     if (!user) return firebaseLogin()
 
     setIsLiking(true)
-    likeContract(user, contract).catch(() => setIsLiking(false))
-    toast(`You tipped ${contract.creatorName} ${formatMoney(LIKE_TIP_AMOUNT)}!`)
+    const timeoutId = setTimeout(() => {
+      likeContract(user, contract).catch(() => setIsLiking(false))
+    }, 3000)
+    toast.custom(
+      (t) => (
+        <TipToast
+          userName={contract.creatorUsername}
+          onUndoClick={() => {
+            clearTimeout(timeoutId)
+          }}
+        />
+      ),
+      { duration: TIP_UNDO_DURATION }
+    )
   }
 
   return (

web/components/tipper.tsx

@@ -9,7 +9,7 @@ import { transact } from 'web/lib/firebase/api'
 import { track } from 'web/lib/service/analytics'
 import { TipButton } from './contract/tip-button'
 import { Row } from './layout/row'
-import { LIKE_TIP_AMOUNT } from 'common/like'
+import { LIKE_TIP_AMOUNT, TIP_UNDO_DURATION } from 'common/like'
 import { formatMoney } from 'common/util/format'
 import { Button } from './button'
 import clsx from 'clsx'
@@ -37,8 +37,8 @@ export function Tipper(prop: {
   const total = totalTip - myTip + localTip
 
   // declare debounced function only on first render
-  const [saveTip] = useState(() =>
-    debounce(async (user: User, comment: Comment, change: number) => {
+  const [saveTip] = useState(
+    () => async (user: User, comment: Comment, change: number) => {
       if (change === 0) {
         return
       }
@@ -69,40 +69,25 @@ export function Tipper(prop: {
         fromId: user.id,
         toId: comment.userId,
       })
-    }, 1500)
+    }
   )
-  // instant save on unrender
-  useEffect(() => () => void saveTip.flush(), [saveTip])
 
   const addTip = (delta: number) => {
-    let cancelled = false
-    setLocalTip(localTip + delta)
     const timeoutId = setTimeout(() => {
+      setLocalTip(localTip + delta)
       me && saveTip(me, comment, localTip - myTip + delta)
-    }, 5000)
-    toast.custom((t) => (
-      <Row className="text-greyscale-6 items-center gap-4 rounded-lg bg-white px-4 py-2 text-sm drop-shadow-md">
-        <div className={clsx(cancelled ? 'hidden' : 'inline')}>
-          You tipped {comment.userName} {formatMoney(LIKE_TIP_AMOUNT)}!
-        </div>
-        <div className={clsx('py-1', cancelled ? 'inline' : 'hidden')}>
-          Cancelled tipping
-        </div>
-        <Button
-          className={clsx(cancelled ? 'hidden' : 'inline')}
-          size="xs"
-          color="gray-outline"
-          onClick={() => {
+    }, 3000)
+    toast.custom(
+      (t) => (
+        <TipToast
+          userName={comment.userName}
+          onUndoClick={() => {
             clearTimeout(timeoutId)
-            setLocalTip(localTip)
-            cancelled = true
           }}
-          disabled={cancelled}
-        >
-          Undo
-        </Button>
-      </Row>
-    ))
+        />
+      ),
+      { duration: TIP_UNDO_DURATION }
+    )
   }
 
   const canUp =
@@ -121,3 +106,38 @@ export function Tipper(prop: {
     </Row>
   )
 }
+
+export function TipToast(props: { userName: string; onUndoClick: () => void }) {
+  const { userName, onUndoClick } = props
+  const [cancelled, setCancelled] = useState(false)
+  return (
+    <div className="relative overflow-hidden rounded-lg bg-white drop-shadow-md">
+      <div
+        className={clsx(
+          'animate-progress-loading absolute bottom-0 z-10 h-1 w-full bg-indigo-600',
+          cancelled ? 'hidden' : ''
+        )}
+      />
+      <Row className="text-greyscale-6 items-center gap-4 px-4 py-2 text-sm">
+        <div className={clsx(cancelled ? 'hidden' : 'inline')}>
+          Tipping {userName} {formatMoney(LIKE_TIP_AMOUNT)}...
+        </div>
+        <div className={clsx('py-1', cancelled ? 'inline' : 'hidden')}>
+          Cancelled tipping
+        </div>
+        <Button
+          className={clsx(cancelled ? 'hidden' : 'inline')}
+          size="xs"
+          color="gray-outline"
+          onClick={() => {
+            onUndoClick()
+            setCancelled(true)
+          }}
+          disabled={cancelled}
+        >
+          Cancel
+        </Button>
+      </Row>
+    </div>
+  )
+}

web/tailwind.config.js

@@ -15,6 +15,15 @@ module.exports = {
       }
     ),
     extend: {
+      keyframes: {
+        progress: {
+          '0%': { width: '0%' },
+          '100%': { width: '100%' },
+        },
+      },
+      animation: {
+        'progress-loading': 'progress 2s linear',
+      },
       colors: {
         primary: '#11b981',
         'primary-focus': '#069668',