anandanand84 · May 20, 2016 19:32 · Jul 29, 2015 · Jul 1, 2015 · Jun 29, 2015 · Jun 29, 2015
diff --git a/app.js b/app.js
@@ -32,8 +32,8 @@ function finishLazyLoading() {
   var link = document.querySelector('#bundle');
 
   // 5. Go if the async Import loaded quickly. Otherwise wait for it.
-  // crbug.com/504944 - readyState never goes to complete in Chrome
-  // crbug.com/505279 - Resource Timing API is also not viable atm.
+  // crbug.com/504944 - readyState never goes to complete until Chrome 46.
+  // crbug.com/505279 - Resource Timing API is not available until Chrome 46.
   if (link.import && link.import.readyState === 'complete') {
     onImportLoaded();
   } else {

diff --git a/app.html b/app.html
@@ -25,7 +25,7 @@
        to town pre-fetching resources, etc. -->
   <link rel="import" id="bundle" href="elements.html" async>
 </head>
-<!-- 2. Don't use <body class="unresolved">. It's a simple FOUC solution, but hides
+<!-- 2. Don't use <body unresolved>. It's a simple FOUC solution, but hides
      the page until imports and Polymer are loaded. Intead, control FOUC manually with
      a splash screen. -->
 <body class="loading">

diff --git a/app.js b/app.js
@@ -17,8 +17,7 @@ if (!webComponentsSupported) {
 
 function finishLazyLoading() {
   // (Optional) Use native Shadow DOM if it's available in the browser.
-  window.Polymer = window.Polymer || {};
-  window.Polymer.dom = 'shadow';
+  window.Polymer = window.Polymer || {dom: 'shadow'};
 
   // 6. Fade splash screen, then remove.
   var onImportLoaded = function() {

diff --git a/app.html b/app.html
@@ -20,25 +20,19 @@
     }
   </style>
 
-  <!--
-    1. Async HTML Imports do not block rending. Benefit of keeping it declarative
-    (instead of dynamically loading it later in JS) is that the parser can go
-    to town pre-fetching resources, etc.
-  -->
+  <!-- 1. Async HTML Imports do not block rending. Benefit of keeping it declarative
+       (instead of dynamically loading it later in JS) is that the parser can go
+       to town pre-fetching resources, etc. -->
   <link rel="import" id="bundle" href="elements.html" async>
 </head>
-<!--
-  2. Don't use <body class="unresolved">. It's a simple FOUC solution, but hides
-  the page until imports and Polymer are loaded. Intead, control FOUC manually with
-  a splash screen.
--->
+<!-- 2. Don't use <body class="unresolved">. It's a simple FOUC solution, but hides
+     the page until imports and Polymer are loaded. Intead, control FOUC manually with
+     a splash screen. -->
 <body class="loading">
-  <!--
-    3. Light weight splash screen is outside of Polymer/imports and styled by
-    the main page. 1st paint is fast, even on polyfilled browsers. Alternatively,
-    one could create an "app shell" and style the page's un-upgraded elements
-    similar to their final upgraded version.
-  -->
+  <!-- 3. Light weight splash screen is outside of Polymer/imports and styled by
+       the main page. 1st paint is fast, even on polyfilled browsers. Alternatively,
+       one could create an "app shell" and style the page's un-upgraded elements
+       similar to their final upgraded version. -->
   <div id="splash"></div>
 
   <!-- Elements wait on the page and are upgraded when elements.html loads. -->

diff --git a/app.html b/app.html
@@ -29,7 +29,7 @@
 </head>
 <!--
   2. Don't use <body class="unresolved">. It's a simple FOUC solution, but hides
-  the page until everything is loaded. We'll instead control FOUC manually with
+  the page until imports and Polymer are loaded. Intead, control FOUC manually with
   a splash screen.
 -->
 <body class="loading">

diff --git a/app.js b/app.js
@@ -32,9 +32,9 @@ function finishLazyLoading() {
 
   var link = document.querySelector('#bundle');
 
-  // 5. There's a chance the async HTML Import loaded quickly, otherwise wait
-  // for it to load.
-  // TODO: crbug.com/504944 - readyState never goes to "complete" in Chrome.
+  // 5. Go if the async Import loaded quickly. Otherwise wait for it.
+  // crbug.com/504944 - readyState never goes to complete in Chrome
+  // crbug.com/505279 - Resource Timing API is also not viable atm.
   if (link.import && link.import.readyState === 'complete') {
     onImportLoaded();
   } else {

diff --git a/index.html → app.html b/index.html → app.html
diff --git a/app.js b/app.js
@@ -10,7 +10,7 @@ if (!webComponentsSupported) {
   script.async = true;
   script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
   script.onload = finishLazyLoading;
-  document.head.appendChild(wcPoly);
+  document.head.appendChild(script);
 } else {
   finishLazyLoading();
 }

diff --git a/app.js b/app.js
@@ -0,0 +1,43 @@
+// 4. Conditionally load the webcomponents polyfill if needed by the browser.
+// This feature detect will need to change over time as browsers implement
+// different features.
+var webComponentsSupported = ('registerElement' in document
+    && 'import' in document.createElement('link')
+    && 'content' in document.createElement('template'));
+
+if (!webComponentsSupported) {
+  var script = document.createElement('script');
+  script.async = true;
+  script.src = '/bower_components/webcomponentsjs/webcomponents-lite.min.js';
+  script.onload = finishLazyLoading;
+  document.head.appendChild(wcPoly);
+} else {
+  finishLazyLoading();
+}
+
+function finishLazyLoading() {
+  // (Optional) Use native Shadow DOM if it's available in the browser.
+  window.Polymer = window.Polymer || {};
+  window.Polymer.dom = 'shadow';
+
+  // 6. Fade splash screen, then remove.
+  var onImportLoaded = function() {
+    var loadEl = document.getElementById('splash');
+    loadEl.addEventListener('transitionend', loadEl.remove);
+
+    document.body.classList.remove('loading');
+
+    // App is visible and ready to load some data!
+  };
+
+  var link = document.querySelector('#bundle');
+
+  // 5. There's a chance the async HTML Import loaded quickly, otherwise wait
+  // for it to load.
+  // TODO: crbug.com/504944 - readyState never goes to "complete" in Chrome.
+  if (link.import && link.import.readyState === 'complete') {
+    onImportLoaded();
+  } else {
+    link.addEventListener('load', onImportLoaded);
+  }
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <style>
+    body.loading #splash {
+      opacity: 1;
+    }
+    #splash {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      transition: opacity 300ms cubic-bezier(0,0,0.2,1);
+      opacity: 0;
+      will-change: opacity;
+      z-index: 1;
+      background: url(...) no-repeat;
+      background-color: #E53935;
+    }
+  </style>
+
+  <!--
+    1. Async HTML Imports do not block rending. Benefit of keeping it declarative
+    (instead of dynamically loading it later in JS) is that the parser can go
+    to town pre-fetching resources, etc.
+  -->
+  <link rel="import" id="bundle" href="elements.html" async>
+</head>
+<!--
+  2. Don't use <body class="unresolved">. It's a simple FOUC solution, but hides
+  the page until everything is loaded. We'll instead control FOUC manually with
+  a splash screen.
+-->
+<body class="loading">
+  <!--
+    3. Light weight splash screen is outside of Polymer/imports and styled by
+    the main page. 1st paint is fast, even on polyfilled browsers. Alternatively,
+    one could create an "app shell" and style the page's un-upgraded elements
+    similar to their final upgraded version.
+  -->
+  <div id="splash"></div>
+
+  <!-- Elements wait on the page and are upgraded when elements.html loads. -->
+  <paper-drawer-panel>
+    ...
+  </paper-drawer-panel>
+
+  <script src="app.js" async></script>
+</body>
+</html>