<LoadingButton /> No `isLoading`. No `useState` in parents. yield your `onClick` handler.

If you use action props, react handles all this for you!

All of this? 🤨 Since this did some numbers, there’s a less contrived version where this shines. But it means I need to use effect ;)

Well maybe not the “taking longer than usual” part, but it’ll handle the loading states for sure

Ooh ok. I thought there was something I missed. Thanks for clarifying Devon 🫡

You should the rest of my projects 😭

Any interactive blog post to link to, please? 😅

I’ll write something for you today

Thanks 😀

Let me know if you still plan to write it :) BTW please add a blog RSS feed so that I don't miss it

Almost done - one last example to write

perfect :)

Interesting concept! I would probably want to yield label + state + icon + isDisabled + ...otherProps, combined, instead of just the label.

Thats right! Returning Partial<LoadingButton.Props> is way better 💪

cool idea generators are sexy but you can’t represent a full state with linear iterators

Oh?

I can't tell if you're trolling or not

Nice work, this is very handy! Do you have a real-world example? Something like using this approach with React Query, or calling an API directly?

never thought of using generators like that, looks cool

useless 😁

pattern looks clean! what if the user doubleclicks before the await resolves, you wld need an AbortController inside or a guard otherwise you race the previouss yield??

what

Can't imagine scenario how I would yield in the middle of long await to notify user It would be better if button had these breakpoints in the its own api

I normally have an API with discreet states like After 3s, if it’s a multi-step process the visibility into “loading” or even showing a live timer is a much better UX imo

I like it

this is sexy