Super Sidebar Performance

Problem to solve

When we started with the super sidebar POCs, one concern was the performance. As we're moving to Vue and GitLab isn't an SPA, there's a flash of unstyled content as the sidebar loads. This happens every time the page is updated and can be a little jarring.

The decision at the time was that, whilst jarring, it was good enough for the alpha and that we could look into improvements once we had the basic implementation up-and-running. That time is now.

Proposal

The reason this happens is not because we're fetching the data, but because we're fetching the Vue application itself. This is the opposite problem to what we usually encounter in GitLab and so, this needs special treatment. There are some options below, boith of which will require some way of splitting the sidebar out from the main bundle. The outcome is more important than the method in this case so use your best judgement.

Prioritizing javascript execution for the sidebar.

All the javascript on the page is set to defer running until everything else on the page has loaded. This includes the rendering of the sidebar. We may be able to seperate the sidebar js in some way so that it's told to render as soon as it's able, and not wait until the page has finished loading.

Heavily caching the sidebar application

Since the sidebar application itself is unlikely to change very often, we can get away with heavily caching it. This can be done with service workers, http caching, local storage, whatever.

Resources

TBD