From e2b09860eaad8ac1b2977849bcbf48fbdf4fcfc4 Mon Sep 17 00:00:00 2001
From: Peter Halliday <pghalliday@gmail.com>
Date: Tue, 2 May 2017 10:33:23 -0700
Subject: [PATCH] adding initialization pending state

---
 app/src/ducklings/app/index.js                |   1 +
 app/test/src/ducklings/app/index.js           |   4 +
 bower.json                                    |   3 +-
 bower_components/paper-spinner/.bower.json    |  59 +++
 .../paper-spinner/.github/ISSUE_TEMPLATE.md   |  33 ++
 bower_components/paper-spinner/.gitignore     |   2 +
 bower_components/paper-spinner/.travis.yml    |  28 ++
 .../paper-spinner/CONTRIBUTING.md             |  77 ++++
 bower_components/paper-spinner/README.md      |  49 +++
 bower_components/paper-spinner/bower.json     |  50 +++
 .../paper-spinner/demo/index.html             | 101 ++++++
 bower_components/paper-spinner/hero.svg       |  27 ++
 bower_components/paper-spinner/index.html     |  30 ++
 .../paper-spinner/paper-spinner-behavior.html |  82 +++++
 .../paper-spinner/paper-spinner-lite.html     |  74 ++++
 .../paper-spinner/paper-spinner-styles.html   | 341 ++++++++++++++++++
 .../paper-spinner/paper-spinner.html          |  94 +++++
 .../paper-spinner/test/index.html             |  31 ++
 .../paper-spinner/test/paper-spinner.html     |  86 +++++
 ui/src/initialize-passphrase.html             |  56 +--
 ui/src/initialize-pending.html                |  38 ++
 ui/src/ui-root.html                           |  26 +-
 ui/test/src/initialize-pending.html           |  46 +++
 ui/test/src/ui-root.html                      |  17 +
 24 files changed, 1318 insertions(+), 37 deletions(-)
 create mode 100644 bower_components/paper-spinner/.bower.json
 create mode 100644 bower_components/paper-spinner/.github/ISSUE_TEMPLATE.md
 create mode 100644 bower_components/paper-spinner/.gitignore
 create mode 100644 bower_components/paper-spinner/.travis.yml
 create mode 100644 bower_components/paper-spinner/CONTRIBUTING.md
 create mode 100644 bower_components/paper-spinner/README.md
 create mode 100644 bower_components/paper-spinner/bower.json
 create mode 100644 bower_components/paper-spinner/demo/index.html
 create mode 100755 bower_components/paper-spinner/hero.svg
 create mode 100644 bower_components/paper-spinner/index.html
 create mode 100644 bower_components/paper-spinner/paper-spinner-behavior.html
 create mode 100644 bower_components/paper-spinner/paper-spinner-lite.html
 create mode 100644 bower_components/paper-spinner/paper-spinner-styles.html
 create mode 100644 bower_components/paper-spinner/paper-spinner.html
 create mode 100644 bower_components/paper-spinner/test/index.html
 create mode 100644 bower_components/paper-spinner/test/paper-spinner.html
 create mode 100644 ui/src/initialize-pending.html
 create mode 100644 ui/test/src/initialize-pending.html

diff --git a/app/src/ducklings/app/index.js b/app/src/ducklings/app/index.js
index 3af933e..1a1bdaa 100644
--- a/app/src/ducklings/app/index.js
+++ b/app/src/ducklings/app/index.js
@@ -31,6 +31,7 @@ export default factory(
     const completeClear = action('COMPLETE_CLEAR');
     return {
       initialState: {
+        pending: true,
         count: 0,
         settings: undefined,
       },
diff --git a/app/test/src/ducklings/app/index.js b/app/test/src/ducklings/app/index.js
index b73402e..fff31e5 100644
--- a/app/test/src/ducklings/app/index.js
+++ b/app/test/src/ducklings/app/index.js
@@ -87,6 +87,10 @@ describe('ducklings', () => {
     });
 
     describe('initial state', () => {
+      it('should be pending', () => {
+        app.isPending(initialState).should.be.true;
+      });
+
       it('should not have settings entries', () => {
         app.hasSettings(initialState).should.be.false;
       });
diff --git a/bower.json b/bower.json
index e06d135..8291e84 100644
--- a/bower.json
+++ b/bower.json
@@ -24,7 +24,8 @@
     "paper-button": "PolymerElements/paper-button#2.0-preview",
     "paper-styles": "PolymerElements/paper-styles#2.0-preview",
     "paper-card": "PolymerElements/paper-card#2.0-preview",
-    "polymer-redux": "polymer-2"
+    "polymer-redux": "polymer-2",
+    "paper-spinner": "PolymerElements/paper-spinner#2.0-preview"
   },
   "devDependencies": {
     "web-component-tester": "Polymer/web-component-tester#^v6.0.0-prerelease.9"
diff --git a/bower_components/paper-spinner/.bower.json b/bower_components/paper-spinner/.bower.json
new file mode 100644
index 0000000..a866831
--- /dev/null
+++ b/bower_components/paper-spinner/.bower.json
@@ -0,0 +1,59 @@
+{
+  "name": "paper-spinner",
+  "description": "A material design spinner",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "spinner",
+    "loading"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-spinner"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-spinner",
+  "ignore": [],
+  "dependencies": {
+    "paper-styles": "PolymerElements/paper-styles#2.0-preview",
+    "polymer": "Polymer/polymer#^2.0.0-rc.1"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
+  },
+  "main": [
+    "paper-spinner.html",
+    "paper-spinner-lite.html"
+  ],
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.7.1",
+        "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+        "web-component-tester": "Polymer/web-component-tester#^4.0.0"
+      }
+    }
+  },
+  "_release": "ecb0d932de",
+  "_resolution": {
+    "type": "branch",
+    "branch": "2.0-preview",
+    "commit": "ecb0d932de650184ec5724dca13364aa537b6846"
+  },
+  "_source": "https://github.com/PolymerElements/paper-spinner.git",
+  "_target": "2.0-preview",
+  "_originalSource": "PolymerElements/paper-spinner",
+  "_direct": true
+}
\ No newline at end of file
diff --git a/bower_components/paper-spinner/.github/ISSUE_TEMPLATE.md b/bower_components/paper-spinner/.github/ISSUE_TEMPLATE.md
new file mode 100644
index 0000000..f1a728a
--- /dev/null
+++ b/bower_components/paper-spinner/.github/ISSUE_TEMPLATE.md
@@ -0,0 +1,33 @@
+<!-- Instructions: https://github.com/PolymerElements/paper-spinner/CONTRIBUTING.md#filing-issues -->
+### Description
+<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
+
+### Expected outcome
+
+<!-- Example: The page stays the same color. -->
+
+### Actual outcome
+
+<!-- Example: The page turns pink. -->
+
+### Live Demo
+<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
+
+### Steps to reproduce
+
+<!-- Example
+1. Put a `paper-foo` element in the page.
+2. Open the page in a web browser.
+3. Click the `paper-foo` element.
+-->
+
+### Browsers Affected
+<!-- Check all that apply -->
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari 9
+- [ ] Safari 8
+- [ ] Safari 7
+- [ ] Edge
+- [ ] IE 11
+- [ ] IE 10
diff --git a/bower_components/paper-spinner/.gitignore b/bower_components/paper-spinner/.gitignore
new file mode 100644
index 0000000..2be39e4
--- /dev/null
+++ b/bower_components/paper-spinner/.gitignore
@@ -0,0 +1,2 @@
+bower_components*
+bower-*.json
diff --git a/bower_components/paper-spinner/.travis.yml b/bower_components/paper-spinner/.travis.yml
new file mode 100644
index 0000000..f80c186
--- /dev/null
+++ b/bower_components/paper-spinner/.travis.yml
@@ -0,0 +1,28 @@
+language: node_js
+sudo: required
+before_script:
+  - npm install -g bower polymer-cli@next
+  - polymer install --variants
+  - sudo mv /usr/bin/google-chrome /usr/bin/google-chrome-old
+  - sudo mv /usr/bin/google-chrome-beta /usr/bin/google-chrome
+env:
+  global:
+    - secure: >-
+        dIA8M55rHJN07lbp0VCU9RkN4CWlbkVdU6cP4wFZabuJJusISThMZVrZeGtbdErvQ8oiSexrE8iCZ7A/OcLnVNCrVBZX5YwJlfbex4I4uG6L8zw1E3oOX1MmdcTx2sI8MffDyG1pnXzwP5lzPItKiscEpepGY9+V0JP1j5z9qVg=
+    - secure: >-
+        KvttUgmPIlCz4WU2WIpse5s/1SVXHoS+snGDkNqYLOVXscRjJoncXYbdvLltf7SPrU7gK4HuEuEVRthhDGtuvgrXUlIOS/gaK8dWI3kuVYPppOU1DnlXgAtj/3quGZG1dNw07IGzOEW4Taq/5KdU8LRqb9clvK+jyoBQZKIXbtg=
+node_js: stable
+addons:
+  firefox: latest
+  apt:
+    sources:
+      - google-chrome
+    packages:
+      - google-chrome-beta
+  sauce_connect: true
+script:
+  - xvfb-run polymer test
+  - >-
+    if [ "${TRAVIS_PULL_REQUEST}" = "false" ]; then polymer test -s 'default';
+    fi
+dist: trusty
diff --git a/bower_components/paper-spinner/CONTRIBUTING.md b/bower_components/paper-spinner/CONTRIBUTING.md
new file mode 100644
index 0000000..093090d
--- /dev/null
+++ b/bower_components/paper-spinner/CONTRIBUTING.md
@@ -0,0 +1,77 @@
+<!--
+This file is autogenerated based on
+https://github.com/PolymerElements/ContributionGuide/blob/master/CONTRIBUTING.md
+
+If you edit that file, it will get updated everywhere else.
+If you edit this file, your changes will get overridden :)
+
+You can however override the jsbin link with one that's customized to this
+specific element:
+
+jsbin=https://jsbin.com/cagaye/edit?html,output
+-->
+
+# Polymer Elements
+## Guide for Contributors
+
+Polymer Elements are built in the open, and the Polymer authors eagerly encourage any and all forms of community contribution. When contributing, please follow these guidelines:
+
+### Filing Issues
+
+**If you are filing an issue to request a feature**, please provide a clear description of the feature. It can be helpful to describe answers to the following questions:
+
+ 1. **Who will use the feature?** _“As someone filling out a form…”_
+ 2. **When will they use the feature?** _“When I enter an invalid value…”_
+ 3. **What is the user’s goal?** _“I want to be visually notified that the value needs to be corrected…”_
+
+**If you are filing an issue to report a bug**, please provide:
+
+ 1. **A clear description of the bug and related expectations.** Consider using the following example template for reporting a bug:
+
+ ```markdown
+ The `paper-foo` element causes the page to turn pink when clicked.
+
+ ## Expected outcome
+
+ The page stays the same color.
+
+ ## Actual outcome
+
+ The page turns pink.
+
+ ## Steps to reproduce
+
+ 1. Put a `paper-foo` element in the page.
+ 2. Open the page in a web browser.
+ 3. Click the `paper-foo` element.
+ ```
+
+ 2. **A reduced test case that demonstrates the problem.** If possible, please include the test case as a JSBin. Start with this template to easily import and use relevant Polymer Elements: [https://jsbin.com/cagaye/edit?html,output](https://jsbin.com/cagaye/edit?html,output).
+
+ 3. **A list of browsers where the problem occurs.** This can be skipped if the problem is the same across all browsers.
+
+### Submitting Pull Requests
+
+**Before creating a pull request**, please ensure that an issue exists for the corresponding change in the pull request that you intend to make. **If an issue does not exist, please create one per the guidelines above**. The goal is to discuss the design and necessity of the proposed change with Polymer authors and community before diving into a pull request.
+
+When submitting pull requests, please provide:
+
+ 1. **A reference to the corresponding issue** or issues that will be closed by the pull request. Please refer to these issues in the pull request description using the following syntax:
+
+ ```markdown
+ (For a single issue)
+ Fixes #20
+
+ (For multiple issues)
+ Fixes #32, fixes #40
+ ```
+
+ 2. **A succinct description of the design** used to fix any related issues. For example:
+
+ ```markdown
+ This fixes #20 by removing styles that leaked which would cause the page to turn pink whenever `paper-foo` is clicked.
+ ```
+
+ 3. **At least one test for each bug fixed or feature added** as part of the pull request. Pull requests that fix bugs or add features without accompanying tests will not be considered.
+
+If a proposed change contains multiple commits, please [squash commits](https://www.google.com/url?q=http://blog.steveklabnik.com/posts/2012-11-08-how-to-squash-commits-in-a-github-pull-request) to as few as is necessary to succinctly express the change. A Polymer author can help you squash commits, so don’t be afraid to ask us if you need help with that!
diff --git a/bower_components/paper-spinner/README.md b/bower_components/paper-spinner/README.md
new file mode 100644
index 0000000..7ade4e9
--- /dev/null
+++ b/bower_components/paper-spinner/README.md
@@ -0,0 +1,49 @@
+[![Build status](https://travis-ci.org/PolymerElements/paper-spinner.svg?branch=master)](https://travis-ci.org/PolymerElements/paper-spinner)
+
+## &lt;paper-spinner&gt;
+
+Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html)
+
+Element providing a multiple color material design circular spinner.
+
+<!---
+```
+<custom-element-demo>
+  <template>
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+    <link rel="import" href="paper-spinner.html">
+    <link rel="import" href="paper-spinner-lite.html">
+    <style is="custom-style">
+      paper-spinner, paper-spinner-lite {
+        margin: 8px 8px 8px 0;
+      }
+      paper-spinner-lite.orange {
+        --paper-spinner-color: var(--google-yellow-500);
+      }
+      paper-spinner-lite.green {
+        --paper-spinner-color: var(--google-green-500);
+      }
+      paper-spinner-lite.thin {
+        --paper-spinner-stroke-width: 1px;
+      }
+      paper-spinner-lite.thick {
+        --paper-spinner-stroke-width: 6px;
+      }
+      #container {
+        display: flex;
+      }
+    </style>
+    <div id="container">    
+      <next-code-block></next-code-block>
+    </div>
+  </template>
+</custom-element-demo>
+```
+-->
+```html
+<paper-spinner active>...</paper-spinner>
+<paper-spinner-lite active class="orange"></paper-spinner-lite>
+<paper-spinner-lite active class="green"></paper-spinner-lite>
+<paper-spinner-lite active class="thin"></paper-spinner-lite>
+<paper-spinner-lite active class="thick"></paper-spinner-lite>
+```
diff --git a/bower_components/paper-spinner/bower.json b/bower_components/paper-spinner/bower.json
new file mode 100644
index 0000000..76d3e38
--- /dev/null
+++ b/bower_components/paper-spinner/bower.json
@@ -0,0 +1,50 @@
+{
+  "name": "paper-spinner",
+  "version": "2.0.0",
+  "description": "A material design spinner",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "spinner",
+    "loading"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/paper-spinner"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/paper-spinner",
+  "ignore": [],
+  "dependencies": {
+    "paper-styles": "PolymerElements/paper-styles#2.0-preview",
+    "polymer": "Polymer/polymer#^2.0.0-rc.1"
+  },
+  "devDependencies": {
+    "iron-component-page": "PolymerElements/iron-component-page#2.0-preview",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#2.0-preview",
+    "web-component-tester": "Polymer/web-component-tester#^6.0.0-prerelease.6",
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0-rc.1"
+  },
+  "main": [
+    "paper-spinner.html",
+    "paper-spinner-lite.html"
+  ],
+  "variants": {
+    "1.x": {
+      "dependencies": {
+        "polymer": "Polymer/polymer#^1.7.1",
+        "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+      },
+      "devDependencies": {
+        "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+        "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+        "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+        "web-component-tester": "Polymer/web-component-tester#^4.0.0"
+      }
+    }
+  }
+}
diff --git a/bower_components/paper-spinner/demo/index.html b/bower_components/paper-spinner/demo/index.html
new file mode 100644
index 0000000..71feb30
--- /dev/null
+++ b/bower_components/paper-spinner/demo/index.html
@@ -0,0 +1,101 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html lang="en">
+  <head>
+    <title>paper-spinner demo</title>
+
+    <meta charset="UTF-8">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+    <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
+    <link rel="import" href="../../paper-styles/color.html">
+    <link rel="import" href="../paper-spinner-lite.html">
+    <link rel="import" href="../paper-spinner.html">
+
+    <custom-style include="demo-pages-shared-styles">
+      <style is="custom-style" include="demo-pages-shared-styles">
+        .vertical-section-container {
+          max-width: 550px;
+        }
+
+        paper-spinner, paper-spinner-lite {
+          margin-right: 24px;
+        }
+      </style>
+    </custom-style>
+  </head>
+  <body unresolved>
+    <div class="vertical-section-container centered">
+      <h3>Spinners can be deactivated or activated</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <paper-spinner></paper-spinner>
+          <paper-spinner active></paper-spinner>
+
+          <paper-spinner-lite></paper-spinner-lite>
+          <paper-spinner-lite active></paper-spinner-lite>
+
+          <button onclick="toggle(event)">Toggle</button>
+        </template>
+      </demo-snippet>
+
+      <h3>Spinners can be styled using custom properties</h3>
+      <demo-snippet class="centered-demo">
+        <template>
+          <custom-style>
+            <style is="custom-style">
+              paper-spinner.multi {
+                --paper-spinner-layer-1-color: var(--paper-purple-500);
+                --paper-spinner-layer-2-color: var(--paper-cyan-500);
+                --paper-spinner-layer-3-color: var(--paper-blue-grey-500);
+                --paper-spinner-layer-4-color: var(--paper-amber-500);
+              }
+              paper-spinner-lite.orange {
+                --paper-spinner-color: var(--google-yellow-500);
+              }
+              paper-spinner-lite.green {
+                --paper-spinner-color: var(--google-green-500);
+              }
+              paper-spinner-lite.thin {
+                --paper-spinner-stroke-width: 1px;
+              }
+              paper-spinner-lite.thick {
+                --paper-spinner-stroke-width: 6px;
+              }
+            </style>
+          </custom-style>
+
+          <paper-spinner class="multi" active></paper-spinner>
+
+          <paper-spinner-lite class="orange" active></paper-spinner-lite>
+          <paper-spinner-lite class="green" active></paper-spinner-lite>
+
+          <paper-spinner-lite class="thin" active></paper-spinner-lite>
+          <paper-spinner-lite class="thick" active></paper-spinner-lite>
+        </template>
+      </demo-snippet>
+    </div>
+
+    <script>
+      function toggle(event) {
+        var spinners = event.target.parentElement.querySelectorAll('paper-spinner, paper-spinner-lite');
+        Array.prototype.forEach.call(spinners, function(spinner) {
+          spinner.active = !spinner.active;
+        });
+      };
+    </script>
+  </body>
+</html>
diff --git a/bower_components/paper-spinner/hero.svg b/bower_components/paper-spinner/hero.svg
new file mode 100755
index 0000000..034b1f1
--- /dev/null
+++ b/bower_components/paper-spinner/hero.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 225 126" enable-background="new 0 0 225 126" xml:space="preserve">
+<g id="background" display="none">
+	<rect display="inline" fill="#B0BEC5" width="225" height="126"/>
+</g>
+<g id="label">
+</g>
+<g id="art">
+	<g>
+		<path d="M112.1,92.3c-13.4,0-25.1-9.1-28.4-22l1.9-0.5c3.1,12.1,13.9,20.5,26.4,20.5c15,0,27.3-12.2,27.3-27.3
+			s-12.2-27.3-27.3-27.3c-8.1,0-15.8,3.6-21,9.8l-1.5-1.3c5.6-6.7,13.8-10.6,22.5-10.6c16.1,0,29.3,13.1,29.3,29.3
+			S128.2,92.3,112.1,92.3z"/>
+		<path d="M112.7,87.3c-6.6,0-12.7-2.5-17.3-7.2c-4.6-4.6-7.2-10.8-7.2-17.3c0-6.6,2.5-12.7,7.2-17.3c7.9-7.9,20.2-9.5,29.8-3.8
+			l-1,1.7c-8.8-5.3-20.1-3.8-27.4,3.5c-4.2,4.2-6.6,9.9-6.6,15.9s2.3,11.7,6.6,15.9s9.9,6.6,15.9,6.6c6,0,11.7-2.3,15.9-6.6
+			c4.7-4.7,7.1-11.3,6.5-18l2-0.2c0.7,7.3-1.9,14.4-7.1,19.6C125.4,84.7,119.2,87.3,112.7,87.3z"/>
+		<path d="M112.5,43.5C101.8,43.5,93,52.3,93,63s8.7,19.5,19.5,19.5S132,73.7,132,63S123.2,43.5,112.5,43.5z M119,64h-6v6h-2v-6h-6
+			v-2h6v-6h2v6h6V64z"/>
+	</g>
+	<g id="ic_x5F_add_x0D_">
+	</g>
+</g>
+<g id="Guides">
+</g>
+</svg>
diff --git a/bower_components/paper-spinner/index.html b/bower_components/paper-spinner/index.html
new file mode 100644
index 0000000..9874334
--- /dev/null
+++ b/bower_components/paper-spinner/index.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+
+    <title>paper-spinner</title>
+
+    <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+
+    <link rel="import" href="../polymer/polymer.html">
+    <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+  </head>
+  <body>
+
+    <iron-component-page></iron-component-page>
+
+  </body>
+</html>
diff --git a/bower_components/paper-spinner/paper-spinner-behavior.html b/bower_components/paper-spinner/paper-spinner-behavior.html
new file mode 100644
index 0000000..392ff2f
--- /dev/null
+++ b/bower_components/paper-spinner/paper-spinner-behavior.html
@@ -0,0 +1,82 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<script>
+
+  /** @polymerBehavior */
+  Polymer.PaperSpinnerBehavior = {
+
+    properties: {
+      /**
+       * Displays the spinner.
+       */
+      active: {
+        type: Boolean,
+        value: false,
+        reflectToAttribute: true,
+        observer: '__activeChanged'
+      },
+
+      /**
+       * Alternative text content for accessibility support.
+       * If alt is present, it will add an aria-label whose content matches alt when active.
+       * If alt is not present, it will default to 'loading' as the alt value.
+       */
+      alt: {
+        type: String,
+        value: 'loading',
+        observer: '__altChanged'
+      },
+
+      __coolingDown: {
+        type: Boolean,
+        value: false
+      }
+    },
+
+    __computeContainerClasses: function(active, coolingDown) {
+      return [
+        active || coolingDown ? 'active' : '',
+        coolingDown ? 'cooldown' : ''
+      ].join(' ');
+    },
+
+    __activeChanged: function(active, old) {
+      this.__setAriaHidden(!active);
+      this.__coolingDown = !active && old;
+    },
+
+    __altChanged: function(alt) {
+      // user-provided `aria-label` takes precedence over prototype default
+      if (alt === 'loading') {
+        this.alt = this.getAttribute('aria-label') || alt;
+      } else {
+        this.__setAriaHidden(alt==='');
+        this.setAttribute('aria-label', alt);
+      }
+    },
+
+    __setAriaHidden: function(hidden) {
+      var attr = 'aria-hidden';
+      if (hidden) {
+        this.setAttribute(attr, 'true');
+      } else {
+        this.removeAttribute(attr);
+      }
+    },
+
+    __reset: function() {
+      this.active = false;
+      this.__coolingDown = false;
+    }
+  };
+</script>
diff --git a/bower_components/paper-spinner/paper-spinner-lite.html b/bower_components/paper-spinner/paper-spinner-lite.html
new file mode 100644
index 0000000..2d37044
--- /dev/null
+++ b/bower_components/paper-spinner/paper-spinner-lite.html
@@ -0,0 +1,74 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="paper-spinner-behavior.html">
+<link rel="import" href="paper-spinner-styles.html">
+
+<!--
+Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html)
+
+Element providing a single color material design circular spinner.
+
+    <paper-spinner-lite active></paper-spinner-lite>
+
+The default spinner is blue. It can be customized to be a different color.
+
+### Accessibility
+
+Alt attribute should be set to provide adequate context for accessibility. If not provided,
+it defaults to 'loading'.
+Empty alt can be provided to mark the element as decorative if alternative content is provided
+in another form (e.g. a text block following the spinner).
+
+    <paper-spinner-lite alt="Loading contacts list" active></paper-spinner-lite>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-spinner-color` | Color of the spinner | `--google-blue-500`
+`--paper-spinner-stroke-width` | The width of the spinner stroke | 3px
+
+@group Paper Elements
+@element paper-spinner-lite
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<dom-module id="paper-spinner-lite">
+  <template strip-whitespace>
+    <style include="paper-spinner-styles"></style>
+
+    <div
+        id="spinnerContainer"
+        class-name="[[__computeContainerClasses(active, __coolingDown)]]"
+        on-animationend="__reset"
+        on-webkit-animation-end="__reset">
+      <div class="spinner-layer">
+        <div class="circle-clipper left"></div>
+        <div class="circle-clipper right"></div>
+      </div>
+    </div>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'paper-spinner-lite',
+
+      behaviors: [
+        Polymer.PaperSpinnerBehavior
+      ]
+    });
+  </script>
+</dom-module>
diff --git a/bower_components/paper-spinner/paper-spinner-styles.html b/bower_components/paper-spinner/paper-spinner-styles.html
new file mode 100644
index 0000000..b606109
--- /dev/null
+++ b/bower_components/paper-spinner/paper-spinner-styles.html
@@ -0,0 +1,341 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<dom-module id="paper-spinner-styles">
+  <template>
+    <style>
+      /*
+      /**************************/
+      /* STYLES FOR THE SPINNER */
+      /**************************/
+
+      /*
+       * Constants:
+       *      ARCSIZE     = 270 degrees (amount of circle the arc takes up)
+       *      ARCTIME     = 1333ms (time it takes to expand and contract arc)
+       *      ARCSTARTROT = 216 degrees (how much the start location of the arc
+       *                                should rotate each time, 216 gives us a
+       *                                5 pointed star shape (it's 360/5 * 3).
+       *                                For a 7 pointed star, we might do
+       *                                360/7 * 3 = 154.286)
+       *      SHRINK_TIME = 400ms
+       */
+
+      :host {
+        display: inline-block;
+        position: relative;
+        width: 28px;
+        height: 28px;
+
+        /* 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
+        --paper-spinner-container-rotation-duration: 1568ms;
+
+        /* ARCTIME */
+        --paper-spinner-expand-contract-duration: 1333ms;
+
+        /* 4 * ARCTIME */
+        --paper-spinner-full-cycle-duration: 5332ms;
+
+        /* SHRINK_TIME */
+        --paper-spinner-cooldown-duration: 400ms;
+      }
+
+      #spinnerContainer {
+        width: 100%;
+        height: 100%;
+
+        /* The spinner does not have any contents that would have to be
+         * flipped if the direction changes. Always use ltr so that the
+         * style works out correctly in both cases. */
+        direction: ltr;
+      }
+
+      #spinnerContainer.active {
+        -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
+        animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite;
+      }
+
+      @-webkit-keyframes container-rotate {
+        to { -webkit-transform: rotate(360deg) }
+      }
+
+      @keyframes container-rotate {
+        to { transform: rotate(360deg) }
+      }
+
+      .spinner-layer {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        white-space: nowrap;
+        border-color: var(--paper-spinner-color, var(--google-blue-500));
+      }
+
+      .layer-1 {
+        border-color: var(--paper-spinner-layer-1-color, var(--google-blue-500));
+      }
+
+      .layer-2 {
+        border-color: var(--paper-spinner-layer-2-color, var(--google-red-500));
+      }
+
+      .layer-3 {
+        border-color: var(--paper-spinner-layer-3-color, var(--google-yellow-500));
+      }
+
+      .layer-4 {
+        border-color: var(--paper-spinner-layer-4-color, var(--google-green-500));
+      }
+
+      /**
+       * IMPORTANT NOTE ABOUT CSS ANIMATION PROPERTIES (keanulee):
+       *
+       * iOS Safari (tested on iOS 8.1) does not handle animation-delay very well - it doesn't
+       * guarantee that the animation will start _exactly_ after that value. So we avoid using
+       * animation-delay and instead set custom keyframes for each color (as layer-2undant as it
+       * seems).
+       */
+      .active .spinner-layer {
+        -webkit-animation-name: fill-unfill-rotate;
+        -webkit-animation-duration: var(--paper-spinner-full-cycle-duration);
+        -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        -webkit-animation-iteration-count: infinite;
+        animation-name: fill-unfill-rotate;
+        animation-duration: var(--paper-spinner-full-cycle-duration);
+        animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        animation-iteration-count: infinite;
+        opacity: 1;
+      }
+
+      .active .spinner-layer.layer-1 {
+        -webkit-animation-name: fill-unfill-rotate, layer-1-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-1-fade-in-out;
+      }
+
+      .active .spinner-layer.layer-2 {
+        -webkit-animation-name: fill-unfill-rotate, layer-2-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-2-fade-in-out;
+      }
+
+      .active .spinner-layer.layer-3 {
+        -webkit-animation-name: fill-unfill-rotate, layer-3-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-3-fade-in-out;
+      }
+
+      .active .spinner-layer.layer-4 {
+        -webkit-animation-name: fill-unfill-rotate, layer-4-fade-in-out;
+        animation-name: fill-unfill-rotate, layer-4-fade-in-out;
+      }
+
+      @-webkit-keyframes fill-unfill-rotate {
+        12.5% { -webkit-transform: rotate(135deg) } /* 0.5 * ARCSIZE */
+        25%   { -webkit-transform: rotate(270deg) } /* 1   * ARCSIZE */
+        37.5% { -webkit-transform: rotate(405deg) } /* 1.5 * ARCSIZE */
+        50%   { -webkit-transform: rotate(540deg) } /* 2   * ARCSIZE */
+        62.5% { -webkit-transform: rotate(675deg) } /* 2.5 * ARCSIZE */
+        75%   { -webkit-transform: rotate(810deg) } /* 3   * ARCSIZE */
+        87.5% { -webkit-transform: rotate(945deg) } /* 3.5 * ARCSIZE */
+        to    { -webkit-transform: rotate(1080deg) } /* 4   * ARCSIZE */
+      }
+
+      @keyframes fill-unfill-rotate {
+        12.5% { transform: rotate(135deg) } /* 0.5 * ARCSIZE */
+        25%   { transform: rotate(270deg) } /* 1   * ARCSIZE */
+        37.5% { transform: rotate(405deg) } /* 1.5 * ARCSIZE */
+        50%   { transform: rotate(540deg) } /* 2   * ARCSIZE */
+        62.5% { transform: rotate(675deg) } /* 2.5 * ARCSIZE */
+        75%   { transform: rotate(810deg) } /* 3   * ARCSIZE */
+        87.5% { transform: rotate(945deg) } /* 3.5 * ARCSIZE */
+        to    { transform: rotate(1080deg) } /* 4   * ARCSIZE */
+      }
+
+      @-webkit-keyframes layer-1-fade-in-out {
+        0% { opacity: 1 }
+        25% { opacity: 1 }
+        26% { opacity: 0 }
+        89% { opacity: 0 }
+        90% { opacity: 1 }
+        to { opacity: 1 }
+      }
+
+      @keyframes layer-1-fade-in-out {
+        0% { opacity: 1 }
+        25% { opacity: 1 }
+        26% { opacity: 0 }
+        89% { opacity: 0 }
+        90% { opacity: 1 }
+        to { opacity: 1 }
+      }
+
+      @-webkit-keyframes layer-2-fade-in-out {
+        0% { opacity: 0 }
+        15% { opacity: 0 }
+        25% { opacity: 1 }
+        50% { opacity: 1 }
+        51% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @keyframes layer-2-fade-in-out {
+        0% { opacity: 0 }
+        15% { opacity: 0 }
+        25% { opacity: 1 }
+        50% { opacity: 1 }
+        51% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @-webkit-keyframes layer-3-fade-in-out {
+        0% { opacity: 0 }
+        40% { opacity: 0 }
+        50% { opacity: 1 }
+        75% { opacity: 1 }
+        76% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @keyframes layer-3-fade-in-out {
+        0% { opacity: 0 }
+        40% { opacity: 0 }
+        50% { opacity: 1 }
+        75% { opacity: 1 }
+        76% { opacity: 0 }
+        to { opacity: 0 }
+      }
+
+      @-webkit-keyframes layer-4-fade-in-out {
+        0% { opacity: 0 }
+        65% { opacity: 0 }
+        75% { opacity: 1 }
+        90% { opacity: 1 }
+        to { opacity: 0 }
+      }
+
+      @keyframes layer-4-fade-in-out {
+        0% { opacity: 0 }
+        65% { opacity: 0 }
+        75% { opacity: 1 }
+        90% { opacity: 1 }
+        to { opacity: 0 }
+      }
+
+      .circle-clipper {
+        display: inline-block;
+        position: relative;
+        width: 50%;
+        height: 100%;
+        overflow: hidden;
+        border-color: inherit;
+      }
+
+      /**
+       * Patch the gap that appear between the two adjacent div.circle-clipper while the
+       * spinner is rotating (appears on Chrome 50, Safari 9.1.1, and Edge).
+       */
+      .spinner-layer::after {
+        left: 45%;
+        width: 10%;
+        border-top-style: solid;
+      }
+
+      .spinner-layer::after,
+      .circle-clipper::after {
+        content: '';
+        box-sizing: border-box;
+        position: absolute;
+        top: 0;
+        border-width: var(--paper-spinner-stroke-width, 3px);
+        border-color: inherit;
+        border-radius: 50%;
+      }
+
+      .circle-clipper::after {
+        bottom: 0;
+        width: 200%;
+        border-style: solid;
+        border-bottom-color: transparent !important;
+      }
+
+      .circle-clipper.left::after {
+        left: 0;
+        border-right-color: transparent !important;
+        -webkit-transform: rotate(129deg);
+        transform: rotate(129deg);
+      }
+
+      .circle-clipper.right::after {
+        left: -100%;
+        border-left-color: transparent !important;
+        -webkit-transform: rotate(-129deg);
+        transform: rotate(-129deg);
+      }
+
+      .active .gap-patch::after,
+      .active .circle-clipper::after {
+        -webkit-animation-duration: var(--paper-spinner-expand-contract-duration);
+        -webkit-animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        -webkit-animation-iteration-count: infinite;
+        animation-duration: var(--paper-spinner-expand-contract-duration);
+        animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
+        animation-iteration-count: infinite;
+      }
+
+      .active .circle-clipper.left::after {
+        -webkit-animation-name: left-spin;
+        animation-name: left-spin;
+      }
+
+      .active .circle-clipper.right::after {
+        -webkit-animation-name: right-spin;
+        animation-name: right-spin;
+      }
+
+      @-webkit-keyframes left-spin {
+        0% { -webkit-transform: rotate(130deg) }
+        50% { -webkit-transform: rotate(-5deg) }
+        to { -webkit-transform: rotate(130deg) }
+      }
+
+      @keyframes left-spin {
+        0% { transform: rotate(130deg) }
+        50% { transform: rotate(-5deg) }
+        to { transform: rotate(130deg) }
+      }
+
+      @-webkit-keyframes right-spin {
+        0% { -webkit-transform: rotate(-130deg) }
+        50% { -webkit-transform: rotate(5deg) }
+        to { -webkit-transform: rotate(-130deg) }
+      }
+
+      @keyframes right-spin {
+        0% { transform: rotate(-130deg) }
+        50% { transform: rotate(5deg) }
+        to { transform: rotate(-130deg) }
+      }
+
+      #spinnerContainer.cooldown {
+        -webkit-animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
+        animation: container-rotate var(--paper-spinner-container-rotation-duration) linear infinite, fade-out var(--paper-spinner-cooldown-duration) cubic-bezier(0.4, 0.0, 0.2, 1);
+      }
+
+      @-webkit-keyframes fade-out {
+        0% { opacity: 1 }
+        to { opacity: 0 }
+      }
+
+      @keyframes fade-out {
+        0% { opacity: 1 }
+        to { opacity: 0 }
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/bower_components/paper-spinner/paper-spinner.html b/bower_components/paper-spinner/paper-spinner.html
new file mode 100644
index 0000000..c182908
--- /dev/null
+++ b/bower_components/paper-spinner/paper-spinner.html
@@ -0,0 +1,94 @@
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../paper-styles/color.html">
+<link rel="import" href="paper-spinner-behavior.html">
+<link rel="import" href="paper-spinner-styles.html">
+
+<!--
+Material design: [Progress & activity](https://www.google.com/design/spec/components/progress-activity.html)
+
+Element providing a multiple color material design circular spinner.
+
+    <paper-spinner active></paper-spinner>
+
+The default spinner cycles between four layers of colors; by default they are
+blue, red, yellow and green. It can be customized to cycle between four different
+colors. Use <paper-spinner-lite> for single color spinners.
+
+### Accessibility
+
+Alt attribute should be set to provide adequate context for accessibility. If not provided,
+it defaults to 'loading'.
+Empty alt can be provided to mark the element as decorative if alternative content is provided
+in another form (e.g. a text block following the spinner).
+
+    <paper-spinner alt="Loading contacts list" active></paper-spinner>
+
+### Styling
+
+The following custom properties and mixins are available for styling:
+
+Custom property | Description | Default
+----------------|-------------|----------
+`--paper-spinner-layer-1-color` | Color of the first spinner rotation | `--google-blue-500`
+`--paper-spinner-layer-2-color` | Color of the second spinner rotation | `--google-red-500`
+`--paper-spinner-layer-3-color` | Color of the third spinner rotation | `--google-yellow-500`
+`--paper-spinner-layer-4-color` | Color of the fourth spinner rotation | `--google-green-500`
+`--paper-spinner-stroke-width` | The width of the spinner stroke | 3px
+
+@group Paper Elements
+@element paper-spinner
+@hero hero.svg
+@demo demo/index.html
+-->
+
+<dom-module id="paper-spinner">
+  <template strip-whitespace>
+    <style include="paper-spinner-styles"></style>
+
+    <div
+        id="spinnerContainer"
+        class-name="[[__computeContainerClasses(active, __coolingDown)]]"
+        on-animationend="__reset"
+        on-webkit-animation-end="__reset">
+      <div class="spinner-layer layer-1">
+        <div class="circle-clipper left"></div>
+        <div class="circle-clipper right"></div>
+      </div>
+
+      <div class="spinner-layer layer-2">
+        <div class="circle-clipper left"></div>
+        <div class="circle-clipper right"></div>
+      </div>
+
+      <div class="spinner-layer layer-3">
+        <div class="circle-clipper left"></div>
+        <div class="circle-clipper right"></div>
+      </div>
+
+      <div class="spinner-layer layer-4">
+        <div class="circle-clipper left"></div>
+        <div class="circle-clipper right"></div>
+      </div>
+    </div>
+  </template>
+
+  <script>
+    Polymer({
+      is: 'paper-spinner',
+
+      behaviors: [
+        Polymer.PaperSpinnerBehavior
+      ]
+    });
+  </script>
+</dom-module>
diff --git a/bower_components/paper-spinner/test/index.html b/bower_components/paper-spinner/test/index.html
new file mode 100644
index 0000000..352eef4
--- /dev/null
+++ b/bower_components/paper-spinner/test/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html><!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+--><html><head>
+
+    <title>paper-spinner tests</title>
+
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+    <script src="../../web-component-tester/browser.js"></script>
+
+  </head>
+  <body>
+
+    <script>
+      WCT.loadSuites([
+        'paper-spinner.html?dom=shadow',
+        'paper-spinner.html?wc-shadydom=true&wc-ce=true'
+      ]);
+    </script>
+
+  
+
+</body></html>
diff --git a/bower_components/paper-spinner/test/paper-spinner.html b/bower_components/paper-spinner/test/paper-spinner.html
new file mode 100644
index 0000000..9e392ef
--- /dev/null
+++ b/bower_components/paper-spinner/test/paper-spinner.html
@@ -0,0 +1,86 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+  <head>
+
+    <meta charset="UTF-8">
+    <title>paper-spinner basic tests</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+    <script src="../../test-fixture/test-fixture-mocha.js"></script>
+
+    <link href="../../test-fixture/test-fixture.html" rel="import">
+    <link href="../paper-spinner.html" rel="import">
+
+  </head>
+  <body>
+
+    <test-fixture id="PaperSpinner">
+      <template>
+        <paper-spinner></paper-spinner>
+      </template>
+    </test-fixture>
+
+    <test-fixture id="ActivePaperSpinner">
+      <template>
+        <paper-spinner active></paper-spinner>
+      </template>
+    </test-fixture>
+
+    <script>
+      'use strict';
+
+      suite('<paper-spinner>', function() {
+
+        suite('an accessible paper spinner', function() {
+          var spinner;
+          var activeSpinner;
+
+          setup(function() {
+            spinner = fixture('PaperSpinner');
+            activeSpinner = fixture('ActivePaperSpinner');
+          });
+
+          test('adds an ARIA label when `alt` is supplied', function() {
+            var ALT_TEXT = 'Loading the next gif...';
+
+            spinner.alt = ALT_TEXT;
+            expect(spinner.getAttribute('aria-label')).to.be.eql(ALT_TEXT);
+          });
+
+          test('hides from ARIA when inactive', function() {
+            spinner.active = false;
+            expect(spinner.getAttribute('aria-hidden')).to.be.eql('true');
+          });
+
+          test('toggle during cooldown', function(done) {
+            activeSpinner.active = false;
+
+            // Set active to true before cooldown animation completes.
+            setTimeout(function() {
+              activeSpinner.active = true;
+
+              // Wait for cooldown animation to complete.
+              setTimeout(function() {
+                expect(activeSpinner.active).to.equal(true);
+                done();
+              }, 500);
+            }, 100);
+          });
+        });
+
+      });
+    </script>
+
+  </body>
+</html>
diff --git a/ui/src/initialize-passphrase.html b/ui/src/initialize-passphrase.html
index 2f1578c..9e20de1 100644
--- a/ui/src/initialize-passphrase.html
+++ b/ui/src/initialize-passphrase.html
@@ -9,34 +9,34 @@
 <dom-module id="initialize-passphrase">
   <template>
     <style include="iron-flex"></style>
-      <div class="layout vertical center">
-        <paper-card>
-          <div class="card-content">
-            <div>[[localize('initialize-passphrase-message')]]</div>
-            <paper-input
-              id="passphrase"
-              type="password"
-              label="[[localize('passphrase-label')]]"
-              value="{{passphrase}}"
-            ></paper-input>
-            <paper-input
-              id="confirmPassphrase"
-              type="password"
-              label="[[localize('confirm-passphrase-label')]]"
-              value="{{confirmPassphrase}}"
-              error-message="[[localize('confirm-passphrase-error')]]"
-            ></paper-input>
-          </div>
-          <div class="card-actions">
-            <paper-button class="layout vertical center"
-              id="initialize"
-              raised class="indigo"
-              on-tap="_initialize"
-              disabled$="[[_isInitializeDisabled(passphrase, confirmPassphrase)]]"
-            >[[localize('initialize-button')]]</paper-button>
-          </div>
-        </paper-card>
-      </div>
+    <div class="layout vertical center">
+      <paper-card>
+        <div class="card-content">
+          <div>[[localize('initialize-passphrase-message')]]</div>
+          <paper-input
+            id="passphrase"
+            type="password"
+            label="[[localize('passphrase-label')]]"
+            value="{{passphrase}}"
+          ></paper-input>
+          <paper-input
+            id="confirmPassphrase"
+            type="password"
+            label="[[localize('confirm-passphrase-label')]]"
+            value="{{confirmPassphrase}}"
+            error-message="[[localize('confirm-passphrase-error')]]"
+          ></paper-input>
+        </div>
+        <div class="card-actions">
+          <paper-button class="layout vertical center"
+            id="initialize"
+            raised class="indigo"
+            on-tap="_initialize"
+            disabled$="[[_isInitializeDisabled(passphrase, confirmPassphrase)]]"
+          >[[localize('initialize-button')]]</paper-button>
+        </div>
+      </paper-card>
+    </div>
   </template>
 
   <script>
diff --git a/ui/src/initialize-pending.html b/ui/src/initialize-pending.html
new file mode 100644
index 0000000..7d40a2e
--- /dev/null
+++ b/ui/src/initialize-pending.html
@@ -0,0 +1,38 @@
+<link rel="import" href="./lib/intl.html">
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+<link rel="import" href="../../bower_components/paper-spinner/paper-spinner-lite.html">
+
+<dom-module id="initialize-pending">
+  <template>
+    <style include="iron-flex"></style>
+    <div class="layout vertical center">
+      <paper-spinner-lite id="spinner" class="blue" active></paper-spinner-lite>
+    </div>
+  </template>
+
+  <script>
+    class InitializePending extends Polymer.mixinBehaviors(
+      [Polymer.AppLocalizeBehavior],
+      Polymer.Element
+    ) {
+      static get is() {
+        return 'initialize-pending';
+      }
+
+      static get properties() {
+        return {
+          language: {
+            value: 'en',
+          },
+        };
+      }
+
+      attached() {
+        this.loadResources(this.resolveUrl('../../locales.json'));
+      }
+    }
+    window.customElements.define(InitializePending.is, InitializePending);
+  </script>
+</dom-module>
diff --git a/ui/src/ui-root.html b/ui/src/ui-root.html
index d800d36..01b7cf8 100644
--- a/ui/src/ui-root.html
+++ b/ui/src/ui-root.html
@@ -1,6 +1,7 @@
 <link rel="import" href="./lib/intl.html">
 <link rel="import" href="./lib/redux-mixin.html">
 <link rel="import" href="../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../bower_components/polymer/lib/elements/dom-if.html">
 <link rel="import" href="../../bower_components/app-localize-behavior/app-localize-behavior.html">
 <link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
 <link rel="import" href="../../bower_components/app-layout/app-header/app-header.html">
@@ -17,7 +18,12 @@
           <div id="title" main-title>[[localize('app-title')]]</div>
         </app-toolbar>
       </app-header>
-      <initialize-passphrase></initialize-passphrase>
+      <template is="dom-if" if="[[isPending]]">
+        <initialize-pending id="pending"></initialize-pending>
+      </template>
+      <template is="dom-if" if="[[_initialize(isPending, hasSettings)]]">
+        <initialize-passphrase id="initialize"></initialize-passphrase>
+      </template>
     </app-header-layout>
   </template>
 
@@ -35,6 +41,10 @@
           language: {
             value: 'en',
           },
+          isPending: {
+            type: Boolean,
+            statePath: app.isPending,
+          },
           hasError: {
             type: Boolean,
             statePath: app.hasError,
@@ -43,19 +53,15 @@
             type: String,
             statePath: app.getErrorText,
           },
-          isPending: {
-            type: Boolean,
-            statePath: app.isPending,
-          },
-          count: {
+          hasSettings: {
             type: Boolean,
             statePath: app.hasSettings,
           },
-          count: {
+          isUnlocked: {
             type: Boolean,
             statePath: app.isUnlocked,
           },
-          count: {
+          settings: {
             type: Object,
             statePath: app.getSettings,
           },
@@ -72,6 +78,10 @@
         this.loadResources(this.resolveUrl('../../locales.json'));
         this.dispatch('initialize');
       }
+
+      _initialize(isPending, hasSettings) {
+        return !isPending && !hasSettings;
+      }
     }
     window.customElements.define(UiRoot.is, UiRoot);
   </script>
diff --git a/ui/test/src/initialize-pending.html b/ui/test/src/initialize-pending.html
new file mode 100644
index 0000000..a240c02
--- /dev/null
+++ b/ui/test/src/initialize-pending.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <title>initialize-passphrase</title>
+
+    <script src="../../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../../bower_components/web-component-tester/browser.js"></script>
+
+    <link rel="import" href="../helpers/common.html">
+    <link rel="import" href="../../src/initialize-pending.html">
+  </head>
+  <body>
+    <test-fixture id="defaultAttributes">
+      <template>
+        <initialize-pending></initialize-pending>
+      </template>
+    </test-fixture>
+
+    <script>
+      let initializePending;
+      describe('initialize-pending', function() {
+        beforeEach(function(done) {
+          initializePending = fixture('defaultAttributes');
+          const stringsLoaded = function() {
+            initializePending.removeEventListener(
+              'app-localize-resources-loaded',
+              stringsLoaded
+            );
+            flush(done);
+          };
+          initializePending.addEventListener(
+            'app-localize-resources-loaded',
+            stringsLoaded
+          );
+        });
+
+        it('should display the spinner', function() {
+          initializePending.$.spinner.should.be.ok;
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/ui/test/src/ui-root.html b/ui/test/src/ui-root.html
index 22a2e99..4e233d2 100644
--- a/ui/test/src/ui-root.html
+++ b/ui/test/src/ui-root.html
@@ -45,6 +45,23 @@
             app.initialize.value
           );
         });
+
+        describe('while initialization is pending', function() {
+          beforeEach(function(done) {
+            app.helpers.reset();
+            app.isPending.value = true;
+            app.helpers.notifyStateChange();
+            flush(done);
+          });
+
+          it('should display the pending component', function() {
+            uiRoot.root.querySelector('#pending').style.display.should.eql('');
+          });
+
+          it('should not display the initialize component', function() {
+            uiRoot.root.querySelector('#initialize').style.display.should.eql('none');
+          });
+        });
       });
     </script>
   </body>