I use react-transition-group for animations and it works great for me except one awkward case.
Consider some abstract UI that at some point might receive an error. Its status can be described via type:
type message = string;
type status = Ok | Error(message);
Fig.1
It works fine if error is not animated but there’s an issue if I want to animate hiding of the message. When I switch status from Error to Ok, message is immediately gone and animated alert has a glitch: text immediately disappears from a screen while alert background is still disappearing. To fix that I change status type to this:
type message = string;
type shown = bool;
type status = Ok | Error(shown, message);
Fig.2
And then the flow looks like this:
| ShowError(message) => ReasonReact.Update({ status: Error(true, message) })
| DismissError =>
switch state.status {
| Error(_, message) => ReasonReact.Update({ status: Error(false, message) })
| _ => ReasonReact.NoUpdate
}
| CleanUpError => ReasonReact.Update({ status: Ok }) /* triggered when animation is done */
Fig.3
That’s kinda ok in context of an application and it fixes the glitch. But it get’s a bit annoying in context of an abstraction. E.g. when library exposes API like Fig.1.
To apply animations, I have to introduce state in application and copy message value there w/ boolean flag to be able to keep message on the screen a little bit longer until exit animation is done.
So, I wonder are there patterns in (Reason)React to handle such cases w/o introducing intermidiate state?