[Bug report] Page flickers after initial load

KnorpelSenf commented 3 years ago

Bug report

Description

When the page loads, it first displays the frontpage, then switches to an all white screen, and then displays it correctly again. This flickering takes less than a second in both Chrome and Firefox with no cache, and gets faster on subsequent page reloads. This affects only the front page.

Steps to reproduce

Reproduction link / repo:

Look at https://grammy.dev/ which is built from here using "vuepress": "^2.0.0-beta.9".

In fact, you can also observe it on the documentation of Vuepress Next itself at https://vuepress2.netlify.app/ if you throttle your network in the devtools, e.g. to Slow 3G.

This does not happen for Vuepress itself, https://vuepress.vuejs.org/ works just fine under all circumstances.

Expected behavior

When the page loads, the content does not disappear again after being displayed.

Screenshots

rec-2021-04-25_13 52 14 (1)

Environment info

Browser: Chrome (Linux), Chrome (Android), Firefox ESR (Linux)
Output of vuepress info:

$ npx vuepress info

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (4) x64 Intel(R) Core(TM) i5-4200M CPU @ 2.50GHz
    Memory: 2.59 GB / 7.55 GB
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.16.1 - /usr/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 7.6.1 - /usr/local/bin/npm
  Utilities:
    Git: 2.20.1 - /usr/bin/git
  Browsers:
    Chrome: 90.0.4430.85
    Firefox: 78.10.0esr
  npmPackages:
    @vuepress/bundler-vite: Not Found
    @vuepress/bundler-webpack:  2.0.0-beta.9 
    @vuepress/cli:  2.0.0-beta.9 
    @vuepress/client:  2.0.0-beta.9 
    @vuepress/core:  2.0.0-beta.9 
    @vuepress/markdown:  2.0.0-beta.9 
    @vuepress/plugin-active-header-links:  2.0.0-beta.9 
    @vuepress/plugin-back-to-top:  2.0.0-beta.9 
    @vuepress/plugin-container:  2.0.0-beta.9 
    @vuepress/plugin-debug: Not Found
    @vuepress/plugin-docsearch: ^2.0.0-beta.9 => 2.0.0-beta.9 
    @vuepress/plugin-git:  2.0.0-beta.9 
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom:  2.0.0-beta.9 
    @vuepress/plugin-nprogress:  2.0.0-beta.9 
    @vuepress/plugin-palette:  2.0.0-beta.9 
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-theme-data:  2.0.0-beta.9 
    @vuepress/shared:  2.0.0-beta.7 
    @vuepress/theme-default:  2.0.0-beta.9 
    @vuepress/theme-vue: Not Found
    @vuepress/utils:  2.0.0-beta.8 
    vue:  3.0.11 
    vue-loader:  16.2.0 
    vue-router:  4.0.6 
    vuepress: ^2.0.0-beta.9 => 2.0.0-beta.9 
    vuepress-vite: Not Found

meteorlxy commented 3 years ago

That might be caused by the hydration. Need more investigation.

KnorpelSenf commented 3 years ago

If I'm not mistaken, this is the same reason why subsections cannot be identified by #-ing the header. Try opening https://grammy.dev/guide/context.html#available-actions. Note how the page loads at the correct scrolling position, but then jumps back to top when the hydration happens.

This bug is probably hidden by the smooth scroll plugin.

meteorlxy commented 3 years ago

I think I have figured out the cause. I'll try to fix it soon

KnorpelSenf commented 3 years ago

Thanks so much! 🎉

vuepress / core