Skip to content

feat(web): pause toast auto-dismiss on hover and focus - #683

Open
DevQwinB wants to merge 1 commit into
drydocs:mainfrom
DevQwinB:feat/653-toast-pause-on-hover
Open

feat(web): pause toast auto-dismiss on hover and focus#683
DevQwinB wants to merge 1 commit into
drydocs:mainfrom
DevQwinB:feat/653-toast-pause-on-hover

Conversation

@DevQwinB

Copy link
Copy Markdown

closes #653

Summary

push() in apps/web/src/store/toast.ts fired an unconditional 4-second
setTimeout for every toast, and nothing in Toasts.tsx paused it. An error
toast with a long message got exactly the same window as a one-word success
toast, and it disappeared mid-read no matter what the user was doing.

Changes

apps/web/src/store/toast.ts

  • TOAST_DURATION_MS (exported) per kind: error 8000ms, success/info
    4000ms — unchanged for the two short kinds.
  • Dismiss timers moved into a module-level map keyed by toast id: they're
    imperative handles, not rendered state, so pausing/resuming never re-renders
    the toast list.
  • New pauseTimer(id) / resumeTimer(id) actions. Pause banks the remaining
    time; resume schedules exactly that remainder, so a toast hovered several
    times still disappears after its full duration of un-hovered time rather
    than restarting each cycle. A repeated pause without an intervening resume
    (moving between the message and the dismiss button fires two mouseenters)
    is a no-op, so elapsed time is never subtracted twice.
  • dismiss() now also cancels the pending timer instead of leaving it to fire
    against an already-removed id.
  • toasts, push, and dismiss keep their existing signatures.

apps/web/src/components/ui/Toasts.tsx

  • onMouseEnter/onFocus pause, onMouseLeave/onBlur resume. Focus events
    bubble in React, so tabbing to the dismiss button pauses the toast too — a
    keyboard user is reading it just as much as a hovering one.
  • The close button still dismisses immediately, including while hovered.

Verification

apps/web:

  • pnpm test → 18 files, 120 tests passing (13 store + 4 new Toasts.test.tsx
    component tests, covering: hover pauses and mouse-leave resumes, focus/blur
    pauses and resumes, close button still works while hovered, error window
    outlives the success window, repeated pauses don't lose time, several
    hover/unhover cycles, unknown-id no-ops, dismiss cancels the timer).
  • pnpm coverage → thresholds pass (85.65% stmts / 71.32% branches).
  • pnpm typecheck, pnpm lint, prettier --check → clean.

The pre-existing auto-dismisses after 4 seconds test is untouched and still
passes.

Note: a fresh checkout needs pnpm build in packages/shared and
packages/stellar-sdk-helpers first, otherwise apps/web's hook tests can't
resolve @meridian/stellar-sdk-helpers. Pre-existing and unrelated to this change.

push() fired an unconditional 4s setTimeout for every toast, so an error
toast with a long message got the same window as a one-word success, and
nothing paused it while the user was reading.

Timers now live outside the store state (imperative handles, not rendered
state) with pauseTimer/resumeTimer actions that bank the remaining time,
so repeated hovers can't restart or double-subtract the window. Toasts.tsx
pauses on mouseenter/focus and resumes on mouseleave/blur; focus events
bubble, so tabbing to the dismiss button pauses too.

Error toasts get an 8s window, the other kinds keep 4s.
@drips-wave

drips-wave Bot commented Aug 31, 2026

Copy link
Copy Markdown

@DevQwinB Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@vercel

vercel Bot commented Aug 31, 2026

Copy link
Copy Markdown

@DevQwinB is attempting to deploy a commit to the Collins' projects Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Enhancement] Toast auto-dismiss doesn't pause on hover or focus

1 participant