Language bar causes layout shift

[jasmussen]

This is likely an issue for language bars across the site, so feel free to move the issue if need be. It's also not the highest priority, but worth refining. If you click between the tabs in the theme directory, the language-bar causes a layout shift:

This happens as initially the bar is not present, and then it loads after a bit. What are some options to improve this?

• Does the language bar need to show up on every sub-section, or is it enough to show it only on the landing page?
• Can the bar be preloaded?
• Can we know that the bar will appear, and reserve the space?
• Can we abs-position the bar so that it sits in the top padding of the page?

[ryelle]

Does the language bar need to show up on every sub-section, or is it enough to show it only on the landing page?

It should be available on the homepage and on single plugins/themes, since those also include specific details about the theme/plugin. It could probably be removed from archive pages, but if we fix the layout shift I don't see a drawback to having it.

It's also available on the main homepage, Documentation homepage, Forums homepage, Learn (homepage and all interior pages). So any solution will need to work for all of these.

It's not on Patterns, but it should be (WordPress/pattern-directory#705).

It used to be on /download, but was removed— maybe with the redesign rollout.

Can the bar be preloaded? Can we know that the bar will appear, and reserve the space?

No, it requires information from the client browser for the language hints, so it can't be rendered server-side.

Can we abs-position the bar so that it sits in the top padding of the page?

Possibly, though it would need some more work— on desktop it works, but as the spacing value shrinks on smaller screens, it collides with the content. On single themes/plugins, with the larger banner, it takes up almost all that space.

Desktop	Mobile

[jasmussen]

but if we fix the layout shift I don't see a drawback to having it.

From my angle it's not just the layout shift, it's the prominence of the callout, which is designed to be visually noticable and therefore implied to be important. And while it's important to solicit translations (therefore homepage and single plugin pages being sensible)—it's really not a task that should befall 80% of visitors. So for me it's mainly about reducing the footprint and prominence.