fix(toast): show animation when closing all modals

[anshumandev2025]

Closes #5620

📝 Description

The modals were not closing with animation because they were all closing simultaneously. I added a slight delay between each modal's closing to allow the animations to play smoothly.

Screen.Recording.2025-08-26.at.9.14.23.AM.mov

Summary by CodeRabbit

• Bug Fixes
  • Closing all toasts now animates smoothly instead of disappearing instantly.
  • Toasts dismiss in a brief, staggered sequence, improving visual feedback and readability during bulk closures.
  • No changes to public APIs; existing integrations continue to work as before.

[vercel]

@anshumandev2025 is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[changeset-bot]

🦋 Changeset detected

Latest commit: a255ed0

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@heroui/toast	Patch
@heroui/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

Walkthrough

Implements staggered asynchronous closing in toast closeAll by introducing per-toast timeouts; adds a changeset entry bumping @heroui/toast with a patch description.

Changes

Cohort / File(s)	Summary
Toast closeAll timing change packages/components/toast/src/toast-provider.tsx	Replaces synchronous iteration over visible toast keys with scheduled closes using setTimeout per key (delay = index × 100ms) calling globalToastQueue?.close(key).
Release metadata .changeset/twelve-needles-bathe.md	Adds changeset for @heroui/toast patch: “show animation when closing all modals”.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant App as App
  participant ToastProvider as ToastProvider
  participant Queue as globalToastQueue

  User->>App: Trigger closeAll()
  App->>ToastProvider: closeAll()
  ToastProvider->>Queue: Read visibleToasts (keys)
  loop For each key with index i
    Note over ToastProvider: schedule close with delay = i × 100ms
    ToastProvider-->>ToastProvider: setTimeout(i × 100ms)
    ToastProvider->>Queue: close(key) (after delay)
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Assessment against linked issues

Objective	Addressed	Explanation
Ensure closeAll closes toasts with animation [#5620]	✅
Ensure closeToast closes a single toast with animation [#5620]	❌	closeToast implementation not modified in this PR.

Assessment against linked issues: Out-of-scope changes

Code Change	Explanation
Changeset text mentions “modals” (.changeset/twelve-needles-bathe.md)	Wording references "modals" rather than "toasts", which is inconsistent with the issue objective.

Suggested labels

👀 Status: To Review

Suggested reviewers

• jrgarciadev

Tip

🔌 Remote MCP (Model Context Protocol) integration is now available!

Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats.

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between afa1641 and a255ed0.

📒 Files selected for processing (1)

• .changeset/twelve-needles-bathe.md (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• .changeset/twelve-needles-bathe.md

✨ Finishing Touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore or @coderabbit ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/components/toast/src/toast-provider.tsx (1)

71-76: Ensure exit animations for single-toast close path

The current implementation in toast-provider.tsx only renders <ToastRegion> when toastQueue.visibleToasts.length > 0, so closing the last toast unmounts the region immediately and skips its exit animation.

• File: packages/components/toast/src/toast-provider.tsx, lines 48–51

return (
  <LazyMotion features={loadFeatures}>
-     {toastQueue.visibleToasts.length > 0 && (
-       <ToastRegion
-         …props
-       />
-     )}
+     <AnimatePresence>
+       {toastQueue.visibleToasts.length > 0 && (
+         <ToastRegion
+           …props
+         />
+       )}
+     </AnimatePresence>
  </LazyMotion>
);

Wrap the region in <AnimatePresence> (or introduce a keepMounted flag) so it isn’t removed before its exit animation runs.

• File: packages/components/toast/src/toast-region.tsx
Ensure the region uses exit variants and calls an onExitComplete (or similar) callback to delay unmount until the animation finishes.

Add a Jest test with fake timers to confirm exit behavior:

• Render a single toast, call closeToast(key), advance timers past the animation duration, and assert the <ToastRegion> (and underlying DOM) remains until exit completes.
• (Optional) Render multiple toasts, call closeAll(), advance timers, and assert staggered close timings.

🧹 Nitpick comments (1)

packages/components/toast/src/toast-provider.tsx (1)

85-89: Avoid magic number, allow cancellation, and short-circuit when staggering isn’t needed.

• The hardcoded 100ms should be a named constant (and ideally configurable).
• Repeated calls to closeAll can stack timeouts; clear pending ones first.
• Short-circuit when keys.length <= 1—no need to stagger.

Apply this diff within closeAll:

@@
-  keys.forEach((key, index) => {
-    setTimeout(() => {
-      globalToastQueue?.close(key);
-    }, index * 100);
-  });
+  // Fast path: nothing (or only one) to close; avoids unnecessary timers
+  if (keys.length <= 1) {
+    keys.forEach((k) => globalToastQueue?.close(k));
+    return;
+  }
+
+  // Cancel any previously scheduled closeAll timers
+  pendingCloseAllTimers.forEach(clearTimeout);
+  pendingCloseAllTimers = [];
+
+  keys.forEach((key, index) => {
+    const timerId = window.setTimeout(() => {
+      globalToastQueue?.close(key);
+    }, index * CLOSE_ALL_STAGGER_MS);
+    pendingCloseAllTimers.push(timerId);
+  });

And add these module-level declarations (near the other module-level vars):

// module-level
let pendingCloseAllTimers: number[] = [];
const CLOSE_ALL_STAGGER_MS = 100; // consider reading from a motion token/theme

Optional: Skip staggering entirely when animations are disabled (e.g., via Provider/global setting) to keep behavior snappy in non-animated environments. If you want, I can wire a shared “animationsEnabled” flag that ToastProvider sets and helpers read.

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 7eea729 and afa1641.

📒 Files selected for processing (2)

• .changeset/twelve-needles-bathe.md (1 hunks)
• packages/components/toast/src/toast-provider.tsx (1 hunks)

🔇 Additional comments (1)

packages/components/toast/src/toast-provider.tsx (1)

85-89: Keep ToastRegion Mounted to Preserve Exit Animations

The <ToastRegion> component already wraps its children in Framer Motion’s AnimatePresence, and when visibleToasts is empty it simply renders no <Toast> instances—so keeping the region mounted incurs no visible “shell” when there are no toasts. However, because we currently unmount <ToastRegion> as soon as the last toast closes, the exit animation never has a chance to play.

Apply the following change in packages/components/toast/src/toast-provider.tsx to always render <ToastRegion> and let AnimatePresence handle mounting/unmounting of individual toasts:

@@ packages/components/toast/src/toast-provider.tsx
-      {toastQueue.visibleToasts.length > 0 && (
-        <ToastRegion
-          disableAnimation={disableAnimation}
-          maxVisibleToasts={maxVisibleToasts}
-          placement={placement}
-          toastOffset={toastOffset}
-          toastProps={toastProps}
-          toastQueue={toastQueue}
-          {...regionProps}
-        />
-      )}
+      {/* Always keep the region mounted so exit animations can run */}
+      <ToastRegion
+        disableAnimation={disableAnimation}
+        maxVisibleToasts={maxVisibleToasts}
+        placement={placement}
+        toastOffset={toastOffset}
+        toastProps={toastProps}
+        toastQueue={toastQueue}
+        {...regionProps}
+      />

• Why this matters: Unmounting the region on the last toast prevents Framer Motion from animating the toast’s exit. Keeping it mounted allows AnimatePresence in toast-region.tsx to detect and animate the final unmount of the last toast.
• Verified:
  • ToastRegion imports and uses AnimatePresence around the list of visibleToasts (so empty arrays render nothing but keep the wrapper)
  • With the conditional removed, the region persists in the DOM, ensuring exit animations play even when closing the sole toast

Please integrate this change to fully resolve Issue #5620.

Likely an incorrect or invalid review comment.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Aug 30, 2025 3:13am
heroui-sb	Ready	Preview	Comment	Aug 30, 2025 3:13am

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@5637

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@5637

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@5637

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@5637

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@5637

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@5637

@heroui/button

npm i https://pkg.pr.new/@heroui/button@5637

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@5637

@heroui/card

npm i https://pkg.pr.new/@heroui/card@5637

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@5637

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@5637

@heroui/code

npm i https://pkg.pr.new/@heroui/code@5637

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@5637

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@5637

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@5637

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@5637

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@5637

@heroui/form

npm i https://pkg.pr.new/@heroui/form@5637

@heroui/image

npm i https://pkg.pr.new/@heroui/image@5637

@heroui/input

npm i https://pkg.pr.new/@heroui/input@5637

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@5637

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@5637

@heroui/link

npm i https://pkg.pr.new/@heroui/link@5637

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@5637

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@5637

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@5637

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@5637

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@5637

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@5637

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@5637

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@5637

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@5637

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@5637

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@5637

@heroui/select

npm i https://pkg.pr.new/@heroui/select@5637

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@5637

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@5637

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@5637

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@5637

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@5637

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@5637

@heroui/table

npm i https://pkg.pr.new/@heroui/table@5637

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@5637

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@5637

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@5637

@heroui/user

npm i https://pkg.pr.new/@heroui/user@5637

@heroui/react

npm i https://pkg.pr.new/@heroui/react@5637

@heroui/system

npm i https://pkg.pr.new/@heroui/system@5637

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@5637

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@5637

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@5637

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@5637

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@5637

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@5637

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@5637

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@5637

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@5637

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@5637

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@5637

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@5637

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@5637

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@5637

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@5637

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@5637

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@5637

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@5637

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@5637

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@5637

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@5637

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@5637

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@5637

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@5637

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@5637

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@5637

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@5637

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@5637

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@5637

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@5637

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@5637

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@5637

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@5637

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@5637

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@5637

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@5637

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@5637

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@5637

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@5637

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@5637

commit: a255ed0

[wingkwong]

closing a single toast does't have animation

[ChaserZ98]

I noticed this issue a few days ago. This is because there is no way to control the internal state of toast component due to the current design of toast component.

The addToast, closeToast and closeAll work by directly calling the ToastQueue APIs from react-aria (i.e. the add and close methods). The ToastQueue has an attribute visibleToasts and the toast region uses it to render all the toast components including animations of adding them and closing them. This means toasts that are playing the close animation are still in the queue and they are removed from the queue until the animation is over.

However, closeToast and closeAll will directly remove toasts from the queue without modifying the internal state of each toast to trigger their close animation. This is why there is no close animation when calling these two methods.

So a good solution would be providing a way to control the internal state of toast component, specifically isToastExiting, and then update closeToast and closeAll to modify that state of each toast.

[ChaserZ98]

@wingkwong I don't see the point of merging this PR.

1. A correct close animation should include a slide-out transition as the following video shows. Currently, only the close button of the toast could trigger this, which is one of the reasons I request feat(toast): provide a way to close the toast itself within the endContent #5605.

   Components._.Toast.-.Close.Toast.Storybook.-.Personal.-.Microsoft.Edge.2025-08-30.11-47-17.mp4

   The videos below are the current UI effects of using closeToast and closeAll after merging this PR.

   Components._.Toast.-.Close.Toast.Storybook.-.Personal.-.Microsoft.Edge.2025-08-30.11-48-06.mp4
   Components._.Toast.-.Close.Toast.Storybook.-.Personal.-.Microsoft.Edge.2025-08-30.11-48-29.mp4

   None of them shows the expected slide-out transition.

2. If this PR aims to add some sort of UI effect of closing each toast one by one to closeAll, it is easy to do the same by directly using the global toast queue (see code example below) and plus, you can customize the gap time of closing each toast or even add a start delay to the whole action or whatever you want. So this is completely doable with the current API. There is no need to change the current closeAll behavior without really solving the close animation issue.

   import { getToastQueue } from "@heroui/react";
   
   export function customCloseAll(){
       const globalToastQueue = getToastQueue();
       const keys = globalToastQueue.visibleToasts.map((toast) => toast.key);
       const startDelay = 300;
       const gap = 100;
       keys.forEach((key, index) => setTimeout(globalToastQueue?.close(key), startDelay + index * gap));
   }

Therefore, my point is this PR should be reverted and the original issue #5620 should be reopen until the closeToast and closeAll API can correctly trigger the close animation of the toast component.

[wingkwong]

@ChaserZ98 thanks for pointing out. I missed slide-out transition as I was using Close the last one as a reference. I've created another PR for that.