Loading toast status
See original GitHub issue🚀 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
Issue Analytics
- State:
- Created 2 years ago
- Comments:5 (3 by maintainers)
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.
@with-heart i would like to give this a shot, please assign this to me