Prevent content reflow of SVGs within the `empty_state.vue` component
When viewing any page that uses the empty_state.vue
there is a content reflow that occurs due to not knowing the SVG img
's height. As a result the page content "jumps" and is a subtle, but negative UX. In GitLab's codebase there are currently ~20 instances using a <gl-empty-state ...>
instance.
Generic example:
Static site editor example:
Specifically, in the static site editor this UX will occur often as there is a loading step that always takes a non-trivial amount of time (more than 1 sec) as we're automating the creation of a branch, a commit on that branch, and an associated merge request.
This issue suggests we default to a width of 250px
for SVGs in the GlEmptyState
component and thus I propose (MR to follow) having an svg-aspect-ratio
prop that can internally be leveraged against the 250px
(while also remaining flexible if we change this default).
We decided to leave it at 250px for now and iterate on it later. I think we're at that later stage now.