Polymer-2 splash-screen

0
votes

I have started with a larger project using Polymer-2. After clearing the browser cache (Chrome) I have the following load statistics:

  • 113 request
  • 986 KB transferred
  • Finish: 6.43 s
  • DOMContentLoaded: 347ms
  • Loaded: 3.48 s

as shown by Chrome.

While this is not really long for a first load it would be nice if there was a simple (animated) display that something is loading. As a test I simply included an <h1>Loading...</h1> before my main (shell) element. The result is that about 3 s still nothing is displayed, then my Loading label is shown and 1 s later the entire content is shown.

I guess this is due to the fact the Polymer template has a <link> to the shell element before the <body> and loads all the dependencies before anything in body is rendered.

Any idea what I could do to have something like a splash-screen shown immediately? If necessary I could show my entire index.html but it is essentially the same as the PSK application template.

1
polymerpolymer-2.x

1 Answers

1
votes

As an example, you can take the SHOP app. The full code can be found here: https://github.com/Polymer/shop.

Basically, in your shell or main-app's <body>, you can simply load webcomponents js loader and import the main-app after that so that import is done lazily and in background.

<body>

  <main-app>Loading...</main-app>

  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
  <link rel="import" href="src/main-app.html">

</body>

This will show Loading... until all the resources are fully loaded.