timolins / react-hot-toast

Smoking Hot React Notifications 🔥
https://react-hot-toast.com
MIT License
9.84k stars 331 forks source link

Custom toast breaks infinite duration #171

Open sjk0-9 opened 2 years ago

sjk0-9 commented 2 years ago

For normal loading toasts:

toast.loading('Loading', { id: 'loading' });
await someProcess();
toast.success('Done', { id: 'loading' });

It behaves as expected, the toast displays "loading" and the spinner for the duration of someProcess and then "done" is displayed for the default 2 seconds, before disappearing.

If I want to use custom toasts. I've got to manually set duration like so:

toast.custom(<div>Loading</div>, { id: 'loading', duration: Infinity });
await someProcess();
toast.success('Done', { id: 'loading' });

And in this case, the "success" toast appears, but doesn't disappear as expected. Even if I manually specify duration in the success toast's options, it still doesn't work. The only workaround I've managed is using toast.dismiss() after calling success like so:

toast.custom(<div>Loading</div>, { id: 'loading', duration: Infinity });
await someProcess();
toast.success('Done', { id: 'loading' });
setTimeout(toast.dismiss('loading'));

Not a major deal breaker but not ideal.

Otherwise, loving the library. Thanks for the great work.

timolins commented 2 years ago

Hi @sjk0-9. Thanks for reporting this. I am able to reproduce this issue, where the success toasts inherits the duration from the loading toast.

I couldn't verify that setting the duration explicitly on the success toast doesn't work – it does on my end.

I'll have a closer look