updated
Whenever something is publishable, you need an action for that. And when it’s published, you need an action to unpublish it, and maybe additional actions that should be available when published. This publish button was created at beam to solve this problem.
Following beam’s minimalistic approach to design, the button is just an icon, until hovered or focused. In either of these states, the button reveals the action label. Clicking the button transitions the content to feedback about what’s happening, or about what’s happened in the case of successful / unsuccessful publishing or unpublishing.
Network calls are simulated and can fail with a 25% probability, click a few times and the outcome might be different, you can also use the buttons below the card to slow down animations.
The simulated request takes a random time between 1.5 and 3.5 seconds, which is deliberate. A fixed duration lets you learn the animation instead of reading the state, and it quietly hides the case that actually matters, the one where the network takes longer than the transition you designed for it.
The result then sits there for two seconds before the button goes back to its resting label, which is long enough to read and short enough that the button doesn’t feel stuck. If you move the pointer back onto it while the result is showing, that timer is thrown away and restarted, so the feedback never disappears from under the cursor of someone who came back to check what happened. Clicking again while a request is in flight does nothing at all: the handler bails out when there is already a pending timeout, so you can’t stack publishes on top of each other.
The 10% control doesn’t touch any of that. It sets a --speed custom property that the transition duration is divided by, so every transition in the button stretches out together while the state machine underneath carries on at its normal pace. That’s the useful way round: you get to watch the motion at a speed you can actually see, without the thing you are inspecting behaving differently from the way it ships.