Skip to content
This repository has been archived by the owner on Dec 13, 2019. It is now read-only.

White empty content flickering on first load #210

Open
luatnd opened this issue Nov 29, 2018 · 0 comments
Open

White empty content flickering on first load #210

luatnd opened this issue Nov 29, 2018 · 0 comments

Comments

@luatnd
Copy link

luatnd commented Nov 29, 2018

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 ?

@rstoenescu rstoenescu transferred this issue from quasarframework/quasar Nov 29, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant