[BUG] - Toast promises cause DOMException

[AshotN]

HeroUI Version

3.0.2

Describe the bug

Whenever a toast promise is replaced it throws a DOMException Uncaught (in promise) DOMException: Skipped ViewTransition due to another transition starting

Your Example Website or App

https://heroui.com/docs/react/components/toast#promise--loading

Steps to Reproduce the Bug or Issue

 <Button
            size="sm"
            variant="secondary"
            onPress={() => {
              const loadingId = toast("Uploading file...", {
                description: "Please wait while we upload your file",
                isLoading: true,
                timeout: 0,
              });

              setTimeout(() => {
                toast.close(loadingId);
                toast.success("File uploaded", {
                  description: "Your file has been uploaded successfully",
                });
              }, 3000);
            }}
          >
            Upload with loading
          </Button>

The toast.success call is the problem

Expected behavior

No error

Screenshots or Videos

No response

Operating System Version

macOS

Browser

Firefox

[Theminacious]

Hey @AshotN, I was able to reproduce this issue on Firefox and looked into it a bit.

It seems like the error is coming from overlapping View Transitions when one toast is replaced immediately by another. I’d like to try fixing this by making sure transitions don’t overlap.

If that sounds okay, I’d be happy to take this up 🙂

[AshotN]

Hey @AshotN, I was able to reproduce this issue on Firefox and looked into it a bit.

It seems like the error is coming from overlapping View Transitions when one toast is replaced immediately by another. I’d like to try fixing this by making sure transitions don’t overlap.

If that sounds okay, I’d be happy to take this up 🙂

Sure, I'm not a maintainer on this repo. You don't need my permission :)