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

White empty content flickering on first load #210

@luatnd

Description

@luatnd

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 ?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions