Loading state preventing closeButton dismiss to work

[D-Rekk]

Describe the feature / bug 📝:

Currently closeButton is not working when toast is in loading state.

Steps to reproduce the bug 🔁:

1. Go to https://sonner.emilkowal.ski/
2. Click on Promise button
3. Try to dismiss the toast using the closeButton while in loading state.

[ynng3]

The reason a toast of type loading does not close is due to the condition set in the code. Specifically, in the Toast component, there are checks to prevent the automatic closing of a loading toast.

sonner/src/index.tsx

Line 199 in 2c345fa

if ((toast.promise && toastType === 'loading') || toast.duration === Infinity || toast.type === 'loading') return;

This logic ensures that if the toast has a loading type, it will not proceed with the auto-close functionality.

If the toast is closed while loading, the user will not be able to see the completed result.
Therefore, it seems that closing is prevented.

So my opinion is that it doesn't seem to be a bug.

[timmy1910]

The reason a toast of type loading does not close is due to the condition set in the code. Specifically, in the Toast component, there are checks to prevent the automatic closing of a loading toast.

// https://github.com/emilkowalski/sonner/blob/main/src/index.tsx#L175
if ((toast.promise && toastType === 'loading') || toast.duration === Infinity || toast.type === 'loading') return;
This logic ensures that if the toast has a loading type, it will not proceed with the auto-close functionality.

If the toast is closed while loading, the user will not be able to see the completed result. Therefore, it seems that closing is prevented.

So my opinion is that it doesn't seem to be a bug.

Is there any way to close toast while in the loading mode, I need this.

[ynng3]

@timmy1910 You can forcefully remove all the toastType === 'loading' parts from the conditional statements in the above code.

sonner/src/index.tsx

Line 199 in 2c345fa

if ((toast.promise && toastType === 'loading') || toast.duration === Infinity || toast.type === 'loading') return;

[emilkowalski]

Agreed with @ynng3.