fix: position loader part correctly in RTL mode

[web-padawan]

Description

• Fixed an incorrect appearance of the loader part in RTL mode. The issue was apparently present since the initial RTL support added in Add RTL specific styles vaadin-combo-box#855
• Also changed to use shorthand CSS properties to fix warning reported by upgrading to Stylelint 16.

Note: no visual tests as I haven't found a way to reliably stop the infinite animation to avoid flakiness 😕

Before

After

Type of change

• Bugfix

[vursen]

Note: no visual tests as I haven't found a way to reliably stop the infinite animation to avoid flakiness 😕

Would adding the following to not-animated-styles.js work to stop the animation?

vaadin-combo-box-overlay::part(loader) {
  animation: none;
  opacity: 1;
}

[web-padawan]

Using animation: none; just hides the loader part completely. I tried animation-iteration-count: 1,1 but with this rule there are still failures after running visual tests for the loading state, so it appears to be not sufficient 🤷‍♂️

[web-padawan]

Ok, using animation: none with opacity: 1 does work. Updated the PR and added visual tests.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[vaadin-bot]

This ticket/PR has been released with Vaadin 24.5.0.alpha6 and is also targeting the upcoming stable 24.5.0 version.