Loading toast status

🚀 Feature request

A new toast status called loading, and this one should display a spinner icon.

🧱 Problem Statement / Justification

Some toast libraries have a loading toast state, and it gives a great feedback for the user and the developer doesn’t need to put the spinners directly in the screen and implementing loading conditions and this type of thing.

✅ Proposed solution or API

Shoud exist a new toast status:

const toast = useToast()

toast({
  title: "Loading...",
  status: "loading", // | "info" | "warning" | "success" | "error"
  isClosable: false,
})

So, based on that property, the toast should display the spinner and a default background color, that can be light blue or other one that fits better.

↩️ Alternatives

Maybe if there’s a way to attach the toast to a state, commonly const [loading, setLoading] = useState(false), and then the toast would appear/disappear depending on the state. In the current implementation, only the duration is defined, and if this “trigger” based in a variable can be implemented I think would fit better, especially for this loading toast.

📝 Additional Information

It would be similar to this: from Cogo Toast

[mattwells19]

This is a really interesting idea. You can sort of replicate this by storing the id of the generated toast and then use that id to close the toast when the promise gets resolved.

I was intrigued so I made a codesandbox to show what I mean: https://codesandbox.io/s/chakra-async-toasts-pbm9x.

Unfortunately I had to manually recreate the styles for the toast since the Chakra toast component isn’t exported on its own. I guess that’s more of a reason to bake this kind of solution into Chakra instead of having it bolted on like this.

Would love to get thoughts from others as I like the idea of this sort of async toast.

[jatin33]

@with-heart i would like to give this a shot, please assign this to me