Reposition the card centric spinner for the Svelte UI for install controllers

The blocker is in, seems this could now proceed, no?

Moving to core-mvp; I agree with the proposed resolution... move the spinner inline with the text that's changing.

(fix title typos)

Happy to report that I have a merge request in place to address this. The throbber was already in the right container, it just needed to have some classes and styles adjusted.

Attached is how it's looking. I don't have package manager working all 100% yet but the GIF shows it stepping through most of the states.

Thanks for this, it looks great!

Code looks good but you might need to recompile your files. See the message: "Svelte compiled files do not match. Running yarn build and commiting the changs should fix this." in here: https://www.drupal.org/pift-ci-job/2686160 →

awesome! I've applied the patch and tested in microsoft edge on macos. there are two details i've noticed.

1. the inline spinner is sort of jumpy and brings in some turbulence (not sure if that is the correct term in english). depending on the length of the state label the inline spinner is changing its position. would it make sense to orient to the longest string for the positioning of the spinner and have a fixed position for it? that way the spinner as well as the starting point of the state label string are sort of steady. it would be less visual input/change and easier to grasp for the eyes and brain? but having a fixed position and orienting to the longest state label has the downside in the context of translations. :/

2. on high contrast mode the spinner is hard to distinguish (grey on black has a low contrast) and sort of looks like there are three independent circular segments instead of a single one.

@kroller thanks so much for testing!

1. I agree that having it left aligned to the max width of the button area would be better, but would also introduce extra white space that may look off.
Left aligning the throbber is how I've seen it used in other places for Ajax links so I think that would be consisten with other experiences.
One option is to move it above the text, right-aligned. (Breaks convention?)
Another option is to animate the width of the text so it more smoothly resizes. Might be the lowest friction option

2. I will make some style updates for high contrast mode (possibly related indirectly to work in #3364776)

1. i agree in regards of introducing extra white space. for short state labels it might look already off for english. other languages might have even shorter strings and more white space. but i would probably still lean towards left aligning the throbber (for LTR). above or right aligned i am not sure about. only with left aligned you have the spinner and the start of the status message in close proximity both other option require eye movement.
and in regards of "animating the width of the text" i don't know how it would look like and how to envision it.

2. cool! and true sort of related to 🐛 Fix display issues in "dark mode" Needs work

3. and talking of LTR i found another detail i've quickly tested to confirm. for RTL the spinner is still centered with the pre patch styling. the changes in the MR are only available for LTR.

@rkoller I recreated the Edge + high contrast mode testing environment, however I found that when I combined "Enable automatic dark mode" + forced-colors the borders and spinner become a gray tone... but without "automatic dark mode" it doesn't happen. And any attempt at overriding with CSS was unsuccessful. This will need a closer look.

We've got the dark mode task, but also opened a new issue for high contrast. https://www.drupal.org/project/project_browser/issues/3368315 📌 Make work with dark mode, high-contrast, forced-colors Active

MR is rebased, so with that new task I'm hoping we can get this task reviewed and approved.

Re 3 -
> for RTL the spinner is still centered with the pre patch styling. the changes in the MR are only available for LTR.

I wasn't able to reproduce this one... test again using the newly rebased branch?

chrisfromredfin → changed the visibility of the branch 3318726-reposition-the-card to hidden.

chrisfromredfin → closed merge request !384

A nice lil' bit o' usability, here!

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