quasar-cli icon indicating copy to clipboard operation
quasar-cli copied to clipboard

White empty content flickering on first load

Open luatnd opened this issue 7 years ago • 0 comments

Hi, I'm using prerendered content to show to users before app was rendered by Vuejs. I notice the problem with quasar on first load is an white empty content flickering.

These are reproducing steps:

  1. Prepare: Use chrome dev tool to simulate Slow 3G network, then open Element panel to inspect the DOM
  2. Enter my site URL then see the DOM: Your index.html has q-app with prerendered content:
<div id="q-app">
  <h1>My prerender content here</h1>
</div>
  1. [bad] Next few seconds, when app..js + vendor..js files was loaded, quasar will execute and change the DOM to this exactly HTML (only a html comment tag inside)
<div id="q-app">
  <!---->
</div>

And my screen was badly white empty now.

  1. Finally, after some more seconds, the quasar app was rerendered:
<div id="q-app">
  <div class="q-layout">
    ... This is rendered content ...
  </div>
</div>

As I tested: The time between step 3 and step 4 is ~1s in Fast 3G simulation, and >600ms on a native android webview / ios webview. It show a white empty screen in that time.

I tested another vue-cli project and it didn't has the step 3 occur. No issue.

So how can I remove step 3 in quasar ?

luatnd avatar Nov 29 '18 13:11 luatnd