Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Polymer preload spinner

Tags:

html

polymer

Sometimes it takes a while for polymer to load, and when using <body unresolved>, the page stays blank until everything is ready. Is there a way to display something between the time that the page is served and the time that polymer is done doing its magic?

like image 284
Peter Klipfel Avatar asked Sep 15 '14 19:09

Peter Klipfel


1 Answers

The documentation that describes the unresolved attribute clears some of this up.

While it's common to apply unresolved to the <body> element, causing the entirety of your page's content to be hidden until Polymer is ready, it can be applied to any element(s). You can, for instance, use <div unresolved> as a wrapper around the portion of your page that relies on Polymer, and create a loading message that's outside that wrapper which will be visible immediately. (You'd then want to listen to the polymer-ready event and hide your loading message when that's fired.)

Here's an example using a very contrived way of slowing down the time it takes for the Polymer element to complete one of its lifecycle methods (live demo):

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <title>Polymer Demo</title>
    <style>
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <p id="spinner">Loading...</p>

    <script src="http://www.polymer-project.org/platform.js"></script>
    <link rel="import" href="http://www.polymer-project.org/components/polymer/polymer.html">

    <polymer-element name="slow-poke">
      <template>
        <h1><content></content></h1>
      </template>
      <script>
        Polymer({
          // Used to introduce a delay in initializing the Polymer element.
          // Don't try this at home!
          created: function() {
            var start = Date.now();
            while (true) {
              if (Date.now() - start > 1000) {
                break;
              }
            }
          }
        });
      </script>
    </polymer-element>

    <div unresolved>
      <slow-poke>Here I am... finally!</slow-poke>
      <slow-poke>Me too!</slow-poke>
    </div>

    <script>
      window.addEventListener('polymer-ready', function() {
        document.querySelector('#spinner').classList.add('hidden');
      });
    </script>
  </body>
</html>

(By the way, what are you finding to be slow-loading? If it's a standard/core element, it might be worth filing a bug against the corresponding project on GitHub.)

like image 108
Jeff Posnick Avatar answered Oct 23 '22 12:10

Jeff Posnick