Edit Site: Make loading spinner colors consistent #51857
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tyxla
added
[Type] Enhancement
tyxla
requested review from
youknowriad,
mtias,
jsnajdr,
jameskoster,
ciampo,
jasmussen,
richtabor and
flootr
|
Size Change: +1.31 kB (0%) Total Size: 1.44 MB
ℹ️ View Unchanged
|
jasmussen
approved these changes
Jun 26, 2023
There was a problem hiding this comment.
Thanks for following up on this one. I know there was effort put into the text color version, but there are some good reasons why I would suggest this is the better approach to start with.
The main reason is that the spinner is part of the WordPress UI, not the theme that you may be editing at a given time. By keeping wp-admin colors, we maintain that connection.
Secondly, I'd personally love for us to put some "optimism" into the spinner component. That is, to only ever show it when things take a while to load, and not just to show it. The precise implementation probably needs a little thought, but just as an example, if the spinner only ever faded in after 0.2 seconds passed, that would be an example of optimism: "it might finish before that?"
Finally, I believe the spinner itself may be due for a visual refresh to become a horizontal bar instead. This bar can be designed with contexts like these in mind, yet still maintain contrast (it'll always have two colors) and admin-color awareness.
In the mean time, with a little opacity change, this works well across colors:
| @@ -4,4 +4,8 @@ | |||
| display: flex; | |||
| align-items: center; | |||
| justify-content: center; | |||
|
|
|||
| circle { | |||
| stroke: rgba($black, 0.5); | |||
There was a problem hiding this comment.
I'd change this to opacity 0.3.
|
Another option to try would be placing the spinner in a white field: 
This fixes the contrast issues that the transparent track causes against certain backgrounds. |
|
I'd avoid the white field, that feels like an entirely new design to me, though I would think a horizontal bar loader could work like that intrinsically. |
|
Thank you, both!
I've updated the opacity to 0.3 and intend to merge this, closing #51800 in favor of this one.
Your rationale makes a lot of sense @jasmussen, thanks for taking the time to elaborate.
I'd be happy to try that out. In any case, I think given that we're aiming to change this to a horizontal progress bar soon, we don't have to spend a ton of time polishing the spinner. That being said, I'd be happy to help if you have any other ideas on how to improve the loading experience. |
|
Flaky tests detected in 6222730. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5376626468
|
Trying that out in #51902, let me know what you think! |
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
* Edit Site: Make loading spinner colors consistent * Reduce opacity of spinner track
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR improves the color of the site editor loading spinner to be consistent with the rest of the admin UI.
Based on the feedback in #51800. Alternative to #51800.
Closes #51800.
Why?
This updates the loading spinner to be consistent with the rest of the admin UI.
How?
We're just changing the track indicator color to use the admin blue, and the track background color to be semi-transparent black, as suggested in #51800.
Testing Instructions
Testing Instructions for Keyboard
None.
Screenshots or screencast