elastic/docs

Eliminate flickering on page load

sylvie777 opened this issue · 1 comments

When navigating from page to page in the Docs, there is a flicker from the page loading the content. Ideally, the flickering should be eliminated.

From @robin13:

Any page you open... e.g. https://www.elastic.co/guide/en/elasticsearch/reference/current/watcher-api-deactivate-watch.html

I mean... you can do it in any browser, but here's a recording:
https://drive.google.com/file/d/14PVqnVb3lP8eq0gtEhpy-qRpZaW3cQH4/view?usp=sharing

Original ticket: https://github.com/elastic/website-www.elastic.co/issues/4293

I'm no longer able to see the recording. The things that I see flicker when loading a docs page are:

  • the Inter font used on the page causes text to get re-rendered after the font loads
  • the "Most Popular" box gets reloaded (we put a static version on the page for clients with JS disabled, then reload with personalized content).

The first is likely more within our control than the latter. We could possibly give it a smoother-looking "loading" animation, but I wouldn't want to slow down the entire page waiting for that content to load.