| • alexhollender_WMF | |
| Nov 17 2022, 1:33 PM |
| F35814072: image.png | |
| Nov 22 2022, 7:13 PM |
| F35814064: image.png | |
| Nov 22 2022, 7:13 PM |
| F35814069: image.png | |
| Nov 22 2022, 7:13 PM |
| F35791507: watchstar animation.webm | |
| Nov 17 2022, 4:55 PM |
| F35791500: watchstar animation.webm | |
| Nov 17 2022, 4:53 PM |
| F35790771: image.png | |
| Nov 17 2022, 1:33 PM |
| F35790766: image.png | |
| Nov 17 2022, 1:33 PM |
| F35790769: image.png | |
| Nov 17 2022, 1:33 PM |
When the watchstar is rotated it becomes misshapen. We should switch to a different animation to avoid this issue.
| active with rotation transform: rotate(72deg); | active without rotation | overlay |
 |  |  |
Use a different animation (instead of the spin):
transform: scale( -1 ) scale( -1 );
To keep these consistent across the skins using them:
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | ovasileva | T317884 [EPIC] Vector 2022 post-deployment work | |||
| Open | ovasileva | T317632 [EPIC] Visual refinements pt2 | |||
| Open | None | T323272 Update watchstar animation |
This looks like a duplicate of https://phabricator.wikimedia.org/T234550 (mobile has had the same issue for some time)?
Our options here are 1) Updating the icon so that it can be rotated 72deg. 2) Increase the rotation to 144 degrees
@Jdlrobson thanks for pointing that out. I think we should follow @Krinkle's recommendation and switch the animation (original comment: T234550#5567642):
@alexhollender_WMF I don't recall the exact context in which I made this suggestion, but whether I forgot or misunderstood, I think my suggestion is perhaps more an answer to how to render the state change once finished, and not to the animation between acknowledgement of the click and the potentially several seconds of time during which a user waits for client and server to download code and request the changes etc. in Vector, the rotating animation is a loading indicator, not a success state (the success state there is a still image).
In Minerva/MobileFrontend there is currently no acknowledement or other response, with an animation used as the success state, played only after the action is completed. This can lead the interface feeling unresponsive for potentially several seconds, and also means that the action is overall perceived as taking longer to complete. I see that on wide-screen Minerva this is mitigated by a change in text label to indicate pending status (albeit involving an unfortunate layout shift).
@Krinkle thanks for the clarification. So there are three states: initial, pending, success (leaving the failure state aside for now). I don't think the spinning, unfilled star in Legacy Vector clearly communicates the pending state. It gives feedback that your click has been registered, but beyond that it's not super clear what is happening. In Vector 2022, the communication of the pending state is even worse: it spins once when you click it (and remains unfilled), then once the request has gone through it gets filled in.
I think we need to decide whether or not we care about clearly communicating the pending state. I believe the Design-System-Team has explored standard patterns here (cc @Volker_E). Perhaps it would look something like this:
| initial | pending | success |
 |  |  |
Side note: @kostajh I believe we discussed the value of the pending state in regards to some other button in the past, but I can't remember which. Do you remember by any chance?
Maybe it was the "Thank" button, and the inconsistency in desktop (when you click, the link text changes and you need to click again to actually send thanks) and mobile (tapping Thanks switches the icon and allows you to cancel within a few seconds).
When the Vector 2022 watchlist star is in the filled-in "watched" state and I click on it, it fills in but does not rotate.
When I stay on the same page and click on the star again, it changes to unfilled but does not rotate.
When a star is "half-filled" because I am watching a page for a limited time and I click the star, it does not change to unfilled and it does not rotate. I have to reload the page to see the unfilled star.
Are these situations supposed to be covered in this bug, or should they have a new bug report / feature request?