Loading toasts: from Saving… to Saved

A loading toast says that work started, then becomes the result. With one toast on screen, the message goes from Saving… to Saved in the same place, rather than a second toast appearing next to it.

Wrap a promise

This is the shortest version. Pass the promise and the three messages.

import { toast } from '@yusufceng1z/ding-react';

      toast.promise(save(), {
        loading: 'Saving…',
        success: 'Saved',
        error: (err) => `Could not save: ${err.message}`,
      });

Update it by hand

For uploads and other jobs with steps, keep the id and update the toast as you go. progress runs from 0 to 1 and draws a thin bar at the bottom of the toast.

const id = toast.loading('Uploading photo…', { progress: 0 });
      toast.update(id, { progress: 0.6 });
      toast.update(id, { type: 'success', title: 'Photo uploaded', progress: null });

Good to know

A loading toast stays until you update or dismiss it, so make sure every code path ends in one of those. Only the newest caller can update the shared toast. If a slow request finishes after you have shown something newer, its update is ignored instead of overwriting the newer message.

For work that takes minutes, also show progress on the page itself. A toast is a poor place for long-running status. See toast notification UX for when to use which.