quasar-cli
quasar-cli copied to clipboard
White empty content flickering on first load
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:
- Prepare: Use chrome dev tool to simulate
Slow 3Gnetwork, then open Element panel to inspect the DOM - 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>
- [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.
- 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.