Bug: Updating toast during dismiss animation results in skipped display

[lucaslee-crypto]

Context

I am using a toast to display the status of a certain process.

I want to first show a toast that display a pending message which last for at most 1 second.
If the process is completed within 1 second, the existing pending message should be replaced with a success/error message.
Otherwise, the toast that contains the pending message should be auto-dismissed, and a new toast that display a success/error message should be displayed after the process is completed.

The time it takes for the process to complete varies and is not predictable.

I implemented this by using a fixed toastId and let the toaster handles accordingly. The behavior is correct most of the time.

Case 1: The process finishes within 1 second (950ms in this demo), replacing existing message.

Screen.Recording.2025-12-31.at.11.35.54.AM.mov

Case 2: The process finishes after 1 second (1250ms in this demo), auto-dismissing the first message, then display a new toast.

Screen.Recording.2025-12-31.at.11.35.36.AM.mov

However, if the process finishes just slightly after 1 second (~1050 - 1200ms), the following bug arises.

Bug Description

When trying to update the toast during the dismiss animation (hardcoded at 200ms), the content of the dismissing toast will be replaced during the animation without cancelling the dismiss animation or display a new toast, resulting in the display of the second message being skipped.

Screen.Recording.2025-12-31.at.11.35.11.AM.mov

Code Demo

<Button
  onClick={() => {
    toast.warning('This is the first toast', {
      id: 'auto-toast',
      duration: 1000,
    })

    setTimeout(() => {
      toast.success('This is the second toast', {
        id: 'auto-toast',
        duration: 1000,
      })
    }, 1050) // Change this timeout duration accordingly
  }}
>
  Auto Content Update
</Button>

Expected Behaviour

The display should either follows Case 1, if we allows a 'grace' period where existing toast could be reused during the dismiss animation, or Case 2 if we strictly follows the toast duration option.