Problem/Motivation

Throbber on the autocomplete fields is not positioned correctly. I was able to track down that this regression is caused by #3085245: Un-inline SVGs in pcss.css files, add build tool to inline them when compiled.

Steps to reproduce

  1. Go to /admin/structure/views/add
  2. Start writing anything on the "tagged with" field

Proposed resolution

Position the throbber correctly in the autocomplete field

Remaining tasks

CommentFileSizeAuthor
#38 After patch AT.mp4316.7 KBAamir M
#38 Before patch AT.mp4260.25 KBAamir M
#32 afterPatch.mp4803 KBasha nair
#32 BeforePatch.mp4449.68 KBasha nair
#29 interdiff_27-29.txt609 bytesranjith_kumar_k_u
#29 3167369-29.patch2.34 KBranjith_kumar_k_u
#27 throbber_position-3167369-27.patch1.6 KBlibbna
#26 after.png4.68 KBlibbna
#26 before.png3.89 KBlibbna
#26 throbber_position-3167369-26.patch1.6 KBlibbna
#20 3167369-15-after-patch-applyed.png100.45 KBrakesh.regar
#19 throbber-after-patch.png15 KBasha nair
#19 throbber before patch.png17.72 KBasha nair
#18 3167369-after_patch.mp442.46 KBabhijith s
#15 3167369-15.patch2.48 KBameymudras
#12 after.png74.22 KBlibbna
#12 before.png73.08 KBlibbna
#11 Screenshot from 2022-06-15 11-27-13.png31.7 KBShiv Yadav
#11 throbber-fix-3167369-11.patch1.65 KBShiv Yadav
Screen Recording 2020-08-26 at 12.03.32.gif361.38 KBlauriii

Issue fork drupal-3167369

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

lauriii created an issue. See original summary.

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Related issues: +#3166068: Autocomplete "loading" message not properly hidden in inline forms

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

quietone’s picture

quietone commented
Status: Active » Postponed (maintainer needs more info)
Issue tags: +Bug Smash Initiative
Related issues: +#3087950: Progress throbber position is incorrect

Is this a duplicate of #3087950: Progress throbber position is incorrect?

jeroent’s picture

jeroent
Primary language Dutch
Location 🇧🇪
commented

I don’t think they are duplicates. This issue is about the throbber in autocomplete fields.

#3087950: Progress throbber position is incorrect is abouth the throbber next to dropbuttons.

quietone’s picture

quietone commented
Status: Postponed (maintainer needs more info) » Active

@JeroenT, thanks for the clarification.

I guess this can go back to active then.

Shiv Yadav’s picture

Shiv Yadav commented
Assigned: Unassigned » Shiv Yadav
Shiv Yadav’s picture

Shiv Yadav commented
Assigned: Shiv Yadav » Unassigned
Status: Active » Needs review
StatusFileSize
new throbber-fix-3167369-11.patch1.65 KB
new Screenshot from 2022-06-15 11-27-13.png31.7 KB
libbna’s picture

libbna commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new before.png73.08 KB
new after.png74.22 KB

The patch LGTM.
Before applying the patch the throbber was not in a right position but after applying the patch it is at right place. Added screenshots.

alexpott’s picture

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

We need to update core/themes/claro/css/components/autocomplete-loading.module.pcss.css and build the css by doing yarn run build:css in the core directory.

alexpott’s picture

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

Also I'm not convinced that swapping the svg for a gif is the correct fix.

ameymudras’s picture

ameymudras commented
StatusFileSize
new 3167369-15.patch2.48 KB

Did some troubleshooting and looks like the SVG it self isn't created correctly. We might need to create a spinner svg again. In the mean time uploading the above patch by making the changes to pcss file.

ameymudras’s picture

ameymudras commented
Status: Needs work » Needs review
vinmayiswamy’s picture

vinmayiswamy commented

I applied #15 patch against 9.5.x-dev and its working for me as expected.
Thanks @ameymudras

abhijith s’s picture

abhijith s commented
StatusFileSize
new 3167369-after_patch.mp442.46 KB

Applied patch #15 and it fixes the issue.Attaching recorded video after applying this patch.

asha nair’s picture

asha nair commented
StatusFileSize
new throbber before patch.png17.72 KB
new throbber-after-patch.png15 KB

Applied patch #15 successfully in 9.5x and it works fine. Adding screenshots

rakesh.regar’s picture

rakesh.regar
Primary language Hindi
Location India 🇮🇳
commented
StatusFileSize
new 3167369-15-after-patch-applyed.png100.45 KB

#15 Patch applied cleanly and working fine in 9.5-dev
+RTBC

libbna’s picture

libbna commented
Status: Needs review » Reviewed & tested by the community

According to the above 3 reviews marking this as RTBC.

jeroent’s picture

jeroent
Primary language Dutch
Location 🇧🇪
commented
Status: Reviewed & tested by the community » Needs work

The background image is still a gif in the latest patch instead of a svg.

Shubham Sharma 77’s picture

Shubham Sharma 77 commented
Status: Needs work » Needs review

JeroenT, SVG is not created correctly it is getting cut from top position.
So, I think we can use gif instead of svg.
We can move this ticket to RTBC.

jeroent’s picture

jeroent
Primary language Dutch
Location 🇧🇪
commented
Status: Needs review » Needs work

Yeah, my point is, and also mentioned in #14, that we should fix the SVG.

libbna’s picture

libbna commented
Assigned: Unassigned » libbna

I will work on this.

libbna’s picture

libbna commented
Status: Needs work » Needs review
StatusFileSize
new throbber_position-3167369-26.patch1.6 KB
new before.png3.89 KB
new after.png4.68 KB

I have added background position to throbber svg as we don't want to change it to gif.

libbna’s picture

libbna commented
StatusFileSize
new throbber_position-3167369-27.patch1.6 KB
libbna’s picture

libbna commented

The command is failing because of autocomplete-loading.module.pcss.css is not updated. In #13 @alexpott
suggested that we should run yarn run build:css but when I run this command it removes the changes that I made on autocomplete-loading.module.css file.

Need some guidance in this. Thanks.

ranjith_kumar_k_u’s picture

ranjith_kumar_k_u commented
StatusFileSize
new 3167369-29.patch2.34 KB
new interdiff_27-29.txt609 bytes
libbna’s picture

libbna commented

@ranjith_kumar_k_u did you manually updated the pcss file or did run any command?

libbna’s picture

libbna commented
Assigned: libbna » Unassigned
asha nair’s picture

asha nair commented
StatusFileSize
new BeforePatch.mp4449.68 KB
new afterPatch.mp4803 KB

Applied patch in #29 and it fixes the issue. Adding screenshots

ameymudras’s picture

ameymudras commented
Status: Needs review » Reviewed & tested by the community

Tested the above patch and it resolves the issue

larowlan’s picture

larowlan
Location 🇦🇺🏝.au GMT+10
commented

Removing issue credit for @rakesh.regar who added screenshots when someone else already had.

Retaining credit for @Asha Nair who did the same in #19 but then retested an untested patch in #32

Status: Reviewed & tested by the community » Needs work

The last submitted patch, 29: 3167369-29.patch, failed testing. View results

ameymudras’s picture

ameymudras commented
Status: Needs work » Needs review
Aamir M’s picture

Aamir M commented
Assigned: Unassigned » Aamir M
Aamir M’s picture

Aamir M commented
Assigned: Aamir M » Unassigned
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Before patch AT.mp4260.25 KB
new After patch AT.mp4316.7 KB

Patch #29 applied successfully and looks good to me.
After applying the patch the position of Autocomplete throbber is correct.

Videos are attached for reference.
Hence moved to RTBC

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Reviewed & tested by the community » Closed (duplicate)
Related issues: +#3308733: Claro: "Spinner" loading icon not vertically aligned properly

Closing this issue as duplicated of #3308733: Claro: "Spinner" loading icon not vertically aligned properly in favor of the solutions used there because that is refactoring the SVG spinner code itself, so no extra code is added. Either way, thanks all for collaborating in this! (Moving the issue credit from here into that one)