[Feature Request] Reduce height of spinners to match input elements

[orenbenkiki]

Problem:

Wrapping a Dropdown in a Loading causes visually jarring page re-layouts:

• Wrap a Dropdown in a Loading - that is, the list of options is fetched from some slow data source, where this data source is specified by some user input.

• When the use specifies a new data source, the Dropdown element is temporarily replaced by a CSS spinner. This spinner is taller than the Dropdown, so everything below the Dropdown is moved a few pixels downward. This is visually jarring.

• When the list of options arrives, the spinner is replaced back by the original Dropdown, which is less tall than the spinner, so everything below the Dropdown is moved a few pixels up. This again is visually jarring.

Solution:

Reduce the height of the spinner to exactly match the height of the input elements (dropdown, button, text, etc.). All these elements have the same height, which is quite sufficient for displaying the spinner (the extra height seems to be just padding - this may depend on the spinner type though).

Alternatives:

It might be possible to override the height of the spinner using CSS but it isn't clear which class name to use, and whether this name is guaranteed to work in future versions.

Edit: Perhaps just document the CSS structure of the spinners so controlling their size would be guaranteed to be stable?

[gvwilson]

Hi - we are tidying up stale issues and PRs in Plotly's public repositories so that we can focus on things that are most important to our community. If this issue is still a concern, please add a comment letting us know what recent version of our software you've checked it with so that I can reopen it and add it to our backlog. (Please note that we will give priority to reports that include a short reproducible example.) If you'd like to submit a PR, we'd be happy to prioritize a review, and if it's a request for tech support, please post in our community forum. Thank you - @gvwilson