Remove loading box component

panels/logbook/ha-panel-logbook.html

@@ -1,6 +1,7 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
 <link rel="import" href="../../bower_components/paper-input/paper-input.html">
 
 <link rel="import" href="../../bower_components/app-layout/app-header-layout/app-header-layout.html">
@@ -8,7 +9,6 @@
 <link rel="import" href="../../bower_components/app-layout/app-toolbar/app-toolbar.html">
 
 <link rel="import" href="../../src/components/ha-menu-button.html">
-<link rel="import" href="../../src/components/loading-box.html">
 <link rel="import" href="../../src/resources/pikaday-js.html">
 <link rel="import" href="../../src/util/hass-behavior.html">
 <link rel="import" href="../../src/resources/home-assistant-style.html">
@@ -52,7 +52,11 @@
             on-focus='datepickerFocus'
           ></paper-input>
 
-          <loading-box hidden$='[[!isLoading]]'>Loading logbook entries</loading-box>
+          <paper-spinner
+            active='[[isLoading]]'
+            hidden$='[[!isLoading]]'
+            alt='Loading logbook entries'
+          ></paper-spinner>
         </div>
         <ha-logbook hass='[[hass]]' entries="[[entries]]" hidden$='[[isLoading]]'></ha-logbook>
       </div>

script/vulcanize.js

@@ -41,14 +41,17 @@ const panelVulcan = new Vulcanize({
   stripExcludes: undefined,
 });
 
+const baseExcludes = [
+  'bower_components/font-roboto/roboto.html',
+  'bower_components/paper-styles/color.html',
+];
+
 const toProcess = [
   {
     source: './src/home-assistant.html',
     output: './build/frontend.html',
     vulcan: new Vulcanize(Object.assign({}, baseVulcanOptions, {
-      stripExcludes: [
-        'bower_components/font-roboto/roboto.html',
-      ],
+      stripExcludes: baseExcludes,
     })),
   },
 ];

src/components/loading-box.html

@@ -1,27 +0,0 @@
-<link rel="import" href="../../bower_components/polymer/polymer.html">
-<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
-
-<dom-module id="loading-box">
-  <template>
-    <style is="custom-style" include="iron-flex"></style>
-    <style>
-      .text {
-        display: inline-block;
-        line-height: 28px;
-        vertical-align: top;
-        margin-left: 8px;
-      }
-    </style>
-
-    <div class='layout horizontal'>
-      <paper-spinner active="true"></paper-spinner>
-      <div class='text'><content></content>…</div>
-    </div>
-  </template>
-</dom-module>
-
-<script>
-Polymer({
-  is: 'loading-box',
-});
-</script>

src/components/state-history-charts.html

@@ -1,8 +1,8 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
 
 <link rel="import" href="../../bower_components/google-apis/google-legacy-loader.html">
 
-<link rel="import" href="./loading-box.html">
 <link rel="import" href="./state-history-chart-timeline.html">
 <link rel="import" href="./state-history-chart-line.html">
 
@@ -27,7 +27,7 @@
     <google-legacy-loader on-api-load="googleApiLoaded"></google-legacy-loader>
 
     <div hidden$="[[!isLoading]]" class='loading-container'>
-      <loading-box>Updating history data</loading-box>
+      <paper-spinner active alt='Updating history data'></paper-spinner>
     </div>
 
     <div class$='[[computeContentClasses(isLoading)]]'>

src/more-infos/more-info-configurator.html

@@ -1,9 +1,8 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../bower_components/paper-spinner/paper-spinner.html'>
 <link rel='import' href='../../bower_components/paper-button/paper-button.html'>
 <link rel='import' href='../../bower_components/paper-input/paper-input-container.html'>
 
-<link rel='import' href='../components/loading-box.html'>
-
 <link rel='import' href='../util/hass-behavior.html'>
 
 <dom-module id='more-info-configurator'>
@@ -30,6 +29,12 @@
         text-align: center;
         height: 41px;
       }
+
+      paper-spinner {
+        width: 14px;
+        height: 14px;
+        margin-right: 20px;
+      }
     </style>
 
     <div class='layout vertical'>
@@ -64,13 +69,16 @@
         <p class='submit'>
           <paper-button
             raised
+            disabled='[[isConfiguring]]'
             on-tap='submitClicked'
-            hidden$='[[isConfiguring]]'
           >
+            <paper-spinner
+              active='[[isConfiguring]]'
+              hidden='[[!isConfiguring]]'
+              alt='Configuring'></paper-spinner>
             [[submitCaption]]
           </paper-button>
 
-          <loading-box hidden$='[[!isConfiguring]]'>Configuring</loading-box>
         </p>
 
       </template>

src/resources/home-assistant-style.html

@@ -18,6 +18,13 @@
     --paper-toggle-button-checked-button-color: #039be5;
     --paper-toggle-button-checked-bar-color: #039be5;
 
+    /* for paper-spinner */
+    --google-red-500: #db4437;
+    --google-blue-500: #4285f4;
+    --google-green-500: #0f9d58;
+    --google-yellow-500: #f4b400;
+
+
     font-size: 14px;
   }