bug - flash interaction with navigate

[wminshew]

A very common pattern with creation & deletion mutations is to simultaneously navigate upon completion. I have noticed that the flash messages don't seem to interact well with the navigation--the flash appears & almost immediately disappears after the navigation.

    onCompleted: ({ createAsk: { title } }) => {
      navigate(routes.asks({ companyId }))
      addMessage(`Ask created: ${title}`, { classes: 'rw-flash-success' })
    },

is there another a way around this that I'm missing? not able to await etc afaik on the navigate call. Or do most of you either navigate OR add a flash message for your CRUD interactions?

[jvanbaarsen]

@wminshew What happens if you switch the two lines around? Or doesn't that make any difference?

[wminshew]

confirmed - no difference

[peterp]

@cannikin I don't think I've seen this particular behaviour myself, is this something that you've noticed before?

[cannikin]

I've noticed that if you don't wait for a flash message to disappear before invoking a second one, it sort of "resets" the timer and now you'll see two messages, then three, then four...until you finally let them disappear, then they'll be gone for good.

[peterp]

@cannikin Maybe we should abstract something like https://react-hot-toast.com/ instead of having our own?

[peterp]

I mean... we could keep the interface, but just use them under the hood. RHT is currently smaller than our implementation.

[cannikin]

hahaha I do love that name.

Yeah, it'd be nice to not have to worry about debugging a custom implementation when someone else has (hopefully) figured all that out already. Looks like they have some interesting options for styling and such, too.

[dthyresson]

Looks like they have some interesting options for styling and such, too.

I'd be curious if it plays well with TailwindCSS/UI such that

https://tailwindui.com/components/application-ui/feedback/alerts

their Alerts like

could be styled that way.

If so, yes toast please!

[jtoar]

This has definitely been ameliorated by react hot toast, but using Sets in scaffolds would seal the deal on getting rid of this awkward rerendering: #2546.