SlicedSilver/Polymer Application Loading Screen.md

## filestoload.html
<!doctype html>
<!-- Here is where you put the scripts required by the page, that would normally be -->
<!-- included in the index.html page, you can still use grunt/gulp build functions on these -->

<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->

<!-- build:js scripts/app.js -->
<script src="scripts/app.js"></script>
<script src="scripts/other.js"></script>
<!-- endbuild-->
<!-- build:js scripts/thirdparty.js -->
<script src="scripts/thirdparty.js"></script>
<script type="text/javascript" src="../bower_components/other/other.min.js"></script>
<!-- endbuild-->

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Add more general HEAD stuff here, like favicons, etc... -->
  <title>Polymer Application</title>
  <!-- style sheet required for styling only the loading screen -->
  <link rel="stylesheet" href="styles/loading.css">

  <script src="scripts/polymerAppLoader.js"></script>
</head>
<!-- when the page is fully loaded by the browser then it will fire the onload event -->
<!-- which will start the script to load in the polymer application files -->
<body onload="polymerLoader.loadPolymerApplication()">
  <!-- Very simple loading screen for fast loading, maybe something like a svg image -->
  <div class="loading">
  </div>
</body>
</html>

## Polymer Application Loading Screen.md

      
    Raw
  

              Polymer Application Loading Screen.md
            
          
    This is a simple snippet for adding a loading screen to a Polymer application. It is useful if your Polymer application is rather large and some users may be on a very slow internet connection.
The basic idea is that a very simple (and small) loading screen page will be loaded by the browser. When the browser has fully loaded and displayed the loading page then it will start loading all the files required for the Polymer application.
For a further speed improvement: the loading.css, and polymerAppLoader.js files can be placed inline with the index.html thus reducing the amount of files to be loaded from the server.
filestoload.html is a seperate file so that the usual grunt/gulp build functions can still be applied as before. Shouldn't require re-writting your build scripts.
Any improvements/comments are encouraged.

  
## polymerAppLoader.js
'use strict';
/* global polymerLoader */
/*jshint unused:false*/
/*jshint -W079*/


// This is the normal conditional loader for the Web components Polyfill
if ('registerElement' in document && 'createShadowRoot' in HTMLElement.prototype && 'import' in document.createElement('link') && 'content' in document.createElement('template')) {
  // We're using a browser with native WC support!
} else {
  // Add web components polyfill...
  document.write('<script src="bower_components/webcomponentsjs/webcomponents.min.js"><\/script>');
}

var polymerLoader = (function() {

  // Function for creating a link element and inserting it into the <head> of the html document
  function addLinkTag(elementType, address, shim, loadTrigger) {
    var tag = document.createElement('link');
    tag.rel = elementType;
    tag.href = address;
    if (shim) {
      // add the shim-shadowdom attribute
      tag.setAttribute('shim-shadowdom', '');
    }
    if (loadTrigger) {
      // This file needs to be loaded before inserting the Polymer Application
      // when finished loading it will call the polymerLoader.insertPolymerApplication() function
      tag.setAttribute('onload', 'polymerLoader.insertPolymerApplication()');
      expectedCalls++;
    }
    document.getElementsByTagName('head')[0].appendChild(tag);
  }

  var pgApploaded = false;

  function loadPolymerApplication() {
    // Only insert once.
    if (!pgApploaded) {
      addLinkTag('stylesheet', 'styles/layered.css', true);
      addLinkTag('stylesheet', 'styles/main.css');
      addLinkTag('import', 'filestoload.html', false, true);
      pgApploaded = true;
    }
  }

  // Counter variable for insertPolymerApplication() calls
  var callCount = 0;
  var expectedCalls = 0;

  function insertPolymerApplication() {
    callCount++;
    // Only when callCount >= expectedCalls
    // The application is only inserted after all required files have loaded
    // for the application to work.
    if (callCount >= expectedCalls) {
      // here is the html that is inserted when everything is loaded.
      document.querySelector('body').innerHTML += '<template is="auto-binding" id="app"><polymer-app id="main-app"></polymer-app></template>';
    }
  }


  return {
    insertPolymerApplication: function() {
      insertPolymerApplication();
    },

    loadPolymerApplication: function() {
      loadPolymerApplication();
    }
  };
})(document);
	<!doctype html>
	<!-- Here is where you put the scripts required by the page, that would normally be -->
	<!-- included in the index.html page, you can still use grunt/gulp build functions on these -->

	<!-- will be replaced with elements/elements.vulcanized.html -->
	<link rel="import" href="elements/elements.html">
	<!-- endreplace-->

	<!-- build:js scripts/app.js -->
	<script src="scripts/app.js"></script>
	<script src="scripts/other.js"></script>
	<!-- endbuild-->
	<!-- build:js scripts/thirdparty.js -->
	<script src="scripts/thirdparty.js"></script>
	<script type="text/javascript" src="../bower_components/other/other.min.js"></script>
	<!-- endbuild-->
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- Add more general HEAD stuff here, like favicons, etc... -->
	<title>Polymer Application</title>
	<!-- style sheet required for styling only the loading screen -->
	<link rel="stylesheet" href="styles/loading.css">

	<script src="scripts/polymerAppLoader.js"></script>
	</head>
	<!-- when the page is fully loaded by the browser then it will fire the onload event -->
	<!-- which will start the script to load in the polymer application files -->
	<body onload="polymerLoader.loadPolymerApplication()">
	<!-- Very simple loading screen for fast loading, maybe something like a svg image -->
	<div class="loading">
	</div>
	</body>
	</html>
	'use strict';
	/* global polymerLoader */
	/jshint unused:false/
	/jshint -W079/


	// This is the normal conditional loader for the Web components Polyfill
	if ('registerElement' in document && 'createShadowRoot' in HTMLElement.prototype && 'import' in document.createElement('link') && 'content' in document.createElement('template')) {
	// We're using a browser with native WC support!
	} else {
	// Add web components polyfill...
	document.write('<script src="bower_components/webcomponentsjs/webcomponents.min.js"><\/script>');
	}

	var polymerLoader = (function() {

	// Function for creating a link element and inserting it into the <head> of the html document
	function addLinkTag(elementType, address, shim, loadTrigger) {
	var tag = document.createElement('link');
	tag.rel = elementType;
	tag.href = address;
	if (shim) {
	// add the shim-shadowdom attribute
	tag.setAttribute('shim-shadowdom', '');
	}
	if (loadTrigger) {
	// This file needs to be loaded before inserting the Polymer Application
	// when finished loading it will call the polymerLoader.insertPolymerApplication() function
	tag.setAttribute('onload', 'polymerLoader.insertPolymerApplication()');
	expectedCalls++;
	}
	document.getElementsByTagName('head')[0].appendChild(tag);
	}

	var pgApploaded = false;

	function loadPolymerApplication() {
	// Only insert once.
	if (!pgApploaded) {
	addLinkTag('stylesheet', 'styles/layered.css', true);
	addLinkTag('stylesheet', 'styles/main.css');
	addLinkTag('import', 'filestoload.html', false, true);
	pgApploaded = true;
	}
	}

	// Counter variable for insertPolymerApplication() calls
	var callCount = 0;
	var expectedCalls = 0;

	function insertPolymerApplication() {
	callCount++;
	// Only when callCount >= expectedCalls
	// The application is only inserted after all required files have loaded
	// for the application to work.
	if (callCount >= expectedCalls) {
	// here is the html that is inserted when everything is loaded.
	document.querySelector('body').innerHTML += '<template is="auto-binding" id="app"><polymer-app id="main-app"></polymer-app></template>';
	}
	}


	return {
	insertPolymerApplication: function() {
	insertPolymerApplication();
	},

	loadPolymerApplication: function() {
	loadPolymerApplication();
	}
	};
	})(document);