Inability to update toast duration dynamically

[aabuhijleh]

This issue was previously reported in #509 but appears to have been closed prematurely. I believe this is still a valid problem that warrants further investigation.

Expected Behavior

The duration of a toast should be updatable after it has been displayed. This is a fairly common use case, especially when providing feedback for async operations such as API calls.

Use Case

1. Show a toast with no duration (or infinite) while an API call is being made.
2. Upon receiving a successful response, update the toast content with a success message that automatically closes after a short duration.
3. If an error occurs, update the toast content with an error message and extend the duration to allow the user to notice and read it.

Example Code

<Button
  onClick={async () => {
    // Display an initial toast with an indefinite duration
    const toastId = toast("Processing request...", {
      duration: Infinity,
    });

    try {
      const response = await apiClient.endpoint.$post({
        json: {
          data: payloadData,
        },
      });

      if (!response.ok) {
        // Update the toast with an error message and a longer duration
        toast("Request failed. Please try again later.", {
          id: toastId,
          duration: 5000,
        });
        return;
      }

      // Handle the success case
      const result = await response.json();
      updateState([...currentState, result]);

      // Update the toast with a success message and shorter duration
      toast("Request completed successfully 🎉", {
        id: toastId,
        duration: 2000,
      });
    } catch (error) {
      // Optional: Handle network or unexpected errors
      toast("Unexpected error occurred. Please try again later.", {
        id: toastId,
        duration: 5000,
      });
    }
  }}
/>

Why This Matters

The ability to dynamically update a toast’s duration enhances user experience by providing timely, context-sensitive feedback.

[hunterrmartinn]

I believe using toast.promise here would solve what you're trying to do.
https://sonner.emilkowal.ski/toast#promise

[aabuhijleh]

I believe using toast.promise here would solve what you're trying to do.
https://sonner.emilkowal.ski/toast#promise

This is good but I don't think it's the same. If you look at my example above, it's hard to achieve this level of granularity with the toast.promise api.

[hqw567]

I have also encountered such a problem

[hqw567]

This probably meets the needs, but it would be even better if the duration could be changed dynamically.

const id = toast.info('Preparing download...', {
  duration: Infinity,
})
try {
  await downloadFile('https://......mp4', undefined, {
    onProgress(event) {
      const progress = Math.floor((event.loaded / event.total) * 100)
      toast.info(`Downloading... ${progress}%`, {
        id,
      })
    },
  })
  toast.info('Download complete 🎉', {
    id,
  })
} catch (error) {
  toast.info('Download failed 😭', {
    id,
  })
}

setTimeout(() => {
  toast.dismiss(id)
}, 3000)