Add "busy button" and Publish Flow.

[mtias]

See #3496.

• Figure out how to distinguish "publishing..." from "updating...".

cc @jasmussen @karmatosed

[codecov]

Codecov Report

Merging #3682 into master will increase coverage by 0.15%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #3682      +/-   ##
==========================================
+ Coverage    37.3%   37.46%   +0.15%     
==========================================
  Files         277      277              
  Lines        6690     6711      +21     
  Branches     1214     1221       +7     
==========================================
+ Hits         2496     2514      +18     
- Misses       3536     3539       +3     
  Partials      658      658

Impacted Files	Coverage Δ
components/button/index.js	90.9% <ø> (ø)	⬆️
...tor/components/post-publish-with-dropdown/index.js	0% <ø> (ø)	⬆️
editor/effects.js	58.87% <100%> (+0.8%)	⬆️
editor/selectors.js	93.43% <100%> (+0.31%)	⬆️
editor/components/post-publish-button/label.js	87.5% <100%> (+4.16%)	⬆️
editor/components/post-featured-image/index.js	35.29% <0%> (+13.07%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1db24fc...ec4dc7c. Read the comment docs.

[aduth]

Pushed ec4dc7c which implements the isPublishingPost selector. One challenge with this implementation was knowing the transaction ID associated with the in-progress save. Since we previously generated a unique ID, we couldn't necessarily know this without otherwise saving a reference to it. With my changes, this was updated to a static value that can be referenced directly by the selector. I don't think this should be an issue, both because we don't allow simultaneous save requests to occur, but even if we did, from what I can tell redux-optimist will still clear itself out when the doubled-up transaction is committed. Another option could be to check whether a transaction has already begun when saving the post, and commit it prior to beginning a new one.

cc @youknowriad

[youknowriad]

Changing the label of the button while saving introduces a weird flickering (the button size changes and reverts quickly) while auto-saving. Do you we could avoid changing the label and just add an is-busy style?

[jasmussen]

Changing the label of the button while saving introduces a weird flickering (the button size changes and reverts quickly) while auto-saving. Do you we could avoid changing the label and just add an is-busy style?

This is a good point, but it may be worth it. Two options I can think of:

1. We add a min-width to the button, so the label can increase in width, without a judder. Probably not scalable with translations.
2. We add a transition to the button width, and see if that makes it feel less jarring — it could potentially be a non-issue.

What do you think?

[youknowriad]

Fixing the width would have been great but it's not possible with translations. I can live with it, but I think we should avoid the label changing at least for "auto-saves" because it's not an "explicit" click and it's a duplicated information with the Saving indicator.

[jasmussen]

Agreed, we have the save status indicator for the autosave, the button itself should probably be only for publishing, updating, and scheduling, as well as "working" versions of those.

Riad in a little noodling on this branch I can't get the CSS transition to have any effect on the width of this — is there something I'm missing or is it just not possible?

[youknowriad]

Riad in a little noodling on this branch I can't get the CSS transition to have any effect on the width of this — is there something I'm missing or is it just not possible?

I think it's because the width property do not change, it's the content that changes

[jasmussen]

I think you're probably right. I tried some tricks, but couldn't get it to work.

[StaggerLeee]

What is that "gradient" on your button ?

[mtias]

It's a transition that signals something is happening and the button is not just disabled.