Found this pre-existing issue while testing #3254202: Remove IE11 Support from Claro

"Spinner" loading icon not vertically aligned properly

CommentFileSizeAuthor
#20 Screen Shot 2022-10-10 at 10.12.26 AM.png44.82 KBandy-blum
#20 Screen Shot 2022-10-10 at 10.12.40 AM.png43.24 KBandy-blum
#19 3308733-18.patch5.65 KBmherchel
#6 3308733-6.patch4.6 KBckrina
#4 3308733-4-after.mp4263.6 KBshyam_bhatt
#3 claro_spinner_loading_icon_not_vertically_aligned_properly-3308733-3.patch4.63 KBchetansonawane
autocomplete.gif28.54 KBmherchel

Comments

mherchel created an issue. See original summary.

chetansonawane’s picture

chetansonawane
he/him
Location Gujarat, India 🇮🇳
commented
Assigned: Unassigned » chetansonawane
chetansonawane’s picture

chetansonawane
he/him
Location Gujarat, India 🇮🇳
commented
Assigned: chetansonawane » Unassigned
Status: Active » Needs review
StatusFileSize
new claro_spinner_loading_icon_not_vertically_aligned_properly-3308733-3.patch4.63 KB

I have uploaded patch for the Spinner loading icon spacing issue and slightly changed the icon animation in svg file of the icon.

shyam_bhatt’s picture

shyam_bhatt
he/him
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new 3308733-4-after.mp4263.6 KB

I have checked the patch working fine when we are using "yarn": ">= 1.2" and "node": ">= 14.0".
Please check the video.

shyam_bhatt’s picture

shyam_bhatt
he/him
commented
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Reviewed & tested by the community » Needs review
StatusFileSize
new 3308733-6.patch4.6 KB

Here's a new patch that applies with new 10.1.x latest changes.

ckrina credited Abhijith S.

ckrina credited alexpott.

ckrina credited ameymudras.

ckrina credited Asha Nair.

ckrina credited lauriii.

ckrina credited Libbna.

ckrina credited ranjith_kumar_k_u.

ckrina credited Shiv Yadav.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Related issues: +#3167369: Autocomplete throbber not positioned correctly

Moving credit from #3167369: Autocomplete throbber not positioned correctly since I've closed that issue as duplicated in favor of this solution.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Status: Needs review » Reviewed & tested by the community

The patch in #3 is still good for 9.5.x.

I tested both a taxonomy tags autocomplete and the spinner that you get in the field UI on the view display form. Both look great after this change whereas the taxonomy tags autocomplete looked wrong.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Reviewed & tested by the community » Needs review

This not only changes the position of the circle within the canvas but also changes the animation. I don't really see why do we need to change the animation to fix the bug because isn't the bug related to the positioning of the circle? The new animation appears to be perceivably slower than the old one which in my opinion is not preferable.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Needs review » Needs work

You're right @lauriii, I missed it. The SVG should keep the old animation (shape & speed).

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Needs review
Issue tags: -CSS, -Novice
StatusFileSize
new 3308733-18.patch5.65 KB

New patch attached. This was way trickier than I anticipated.

A couple notes:

  • I hand edited the SVG (which was the tricky part). I made sure not to change the speed of the animation.
  • I took special care to ensure the spinner is placed exactly above the magnifier icon, so that's the reason of the CSS changes.
  • @alexpott stated, he tested "field UI on the view display form". I'm not sure what he means by this, so I didn't test it there. I tested this in the regular tags autocomplete.
  • Be sure to test the RTL version of this too.
andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Screen Shot 2022-10-10 at 10.12.40 AM.png43.24 KB
new Screen Shot 2022-10-10 at 10.12.26 AM.png44.82 KB

Looks like everything is in the right place and spinning the correct direction in patch #18 (comment #19)

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Version: 10.1.x-dev » 9.4.x-dev
Status: Reviewed & tested by the community » Fixed

Committed and pushed 8ea977b6a0 to 10.1.x and 110446907a to 10.0.x. Thanks!
Committed and pushed eef69b0281 to 9.5.x and 30c7b0743b to 9.4.x. Thanks!

Backported to 9.5.x and 9.4.x using a 3way merge.

  • alexpott committed 8ea977b on 10.1.x 
    Issue #3308733 by mherchel, ckrina, chetansonawane, andy-blum, lauriii,...

  • alexpott committed 1104469 on 10.0.x 
    Issue #3308733 by mherchel, ckrina, chetansonawane, andy-blum, lauriii,...

  • alexpott committed eef69b0 on 9.5.x 
    Issue #3308733 by mherchel, ckrina, chetansonawane, andy-blum, lauriii,...

  • alexpott committed 30c7b07 on 9.4.x 
    Issue #3308733 by mherchel, ckrina, chetansonawane, andy-blum, lauriii,...
alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented

@mherchel the other place I know a spinner is used in the UI is on admin/structure/types/manage/article/display. To see this:

  1. Install standard
  2. Log in as user 1
  3. Go to admin/structure/types/manage/article/display
  4. Click on any of the cogs on the right side of each field display
  5. You'll see a spinner as the view display for the form loads

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.