The loading bar and its placeholder have different sizes

[eyskog]

Severity

Trivial

Version

2024.3.12741

Latest Version

None

What happened?

When a view is performing a request, such as periodically getting deploy status, the placeholder for the indeterminate loading bar has a height of 4px, while the loading bar itself has a height of 0.25rem. Since these can differ, as they do on my browser, the whole view jumps around

Reproduction

1. Go to any view that will show a loading bar on requests
2. Perform an action that triggers a request, such as starting a deployment
3. See that the view jumps around if the browser has the right font size set, since rem follows the browser font size

Error and Stacktrace

No response

More Information

My browser is Firefox Developer Edition 132.0b9, using font size 20, which makes 0.25rem equal to 5px. But this can happen in any browser

Workaround

Please either specify the heights using the same units, or implement the indeterminate loading bar as an absolutely positioned element that does not take up extra space