Woocommerce-admin: Consider always displaying the WP Notice Button?

[justinshreve]

We initially decided to just hide the WP Notices button when there are no notices to show (see p1530193919000107-slack-woo-dash).

This is causing some issues with implementing the PHP buttons in #190 (to display as the embed loads), due to the JS needing to re-run every time.

It's hard to get the total number of notices from PHP without doing some regex to match the same classes we are in JS -- so we either have to initially display the Notices tab, or initially hide it. Once the JS loads in, the button may remain (if there are notices), or disappear. This can cause the WP notice tab to briefly flash as you navigate between classic pages, since classic pages do a full page refresh.

Could we consider disabling or graying out the button instead of removing it? That would help the transition here be a little less jarring. This would also stop the tabs from jumping when you close out all open WP notices.

cc @woocommerce/woo-core-design

[justinshreve]

Related: https://github.com/woocommerce/wc-admin/pull/228

[jameskoster]

Graying out the tab doesn't feel great - I really would prefer to hide it when there are no notices to remove any potential confusion.

Does this happen on every page load? If we can restrict it to once per session or something that would help.

Is there scope for animation here? Sliding the other tabs over and fading the Notices tab in would greatly reduce the clunkiness. I can mock something up if it'll be possible.

[justinshreve]

Does this happen on every page load? If we can restrict it to once per session or something that would help.

For existing pages we are embedding this on (orders, coupons, products, settings, etc) yes.
For React powered pages, no.

I attached two videos that show this behavior and the circumstances that can cause the clunkiness:

1) I have the notices button displayed via PHP on initial load, and then the JS loads in and detects no notices:

https://cloudup.com/cVFVjhwWjXU

2) I don't display the notices button via PHP on initial load, but then the JS detects notices:

https://cloudup.com/c0NBlNqXzFt

--

Is there scope for animation here? Sliding the other tabs over and fading the Notices tab in would greatly reduce the clunkiness. I can mock something up if it'll be possible.

It sounds like you are suggesting an animation for #2. Yes it's possible. I threw together something basic (that we can improve - it's still a little clunky), but it would still run between pages: https://cloudup.com/cfO4O9rIiP9

I'm open to other ideas here. cc @timmyc for any ideas

[jameskoster]

Yeah #2 is the way to go I think. Thanks for providing the examples.

The animation is a bit too distracting, I think we'll need to be more subtle. Let's try hiding all tabs until the Notice tab display has been determined, then quickly fade them all in accordingly.

[justinshreve]

@jameskoster Here is an example of what that looks like:

https://cloudup.com/cIKQIKdxMTH

[jameskoster]

I think that's as good as we're going to get :)