MD History: Add spinners when new data is loading or searching

chrome/browser/resources/md_history/history_toolbar.html

Index: chrome/browser/resources/md_history/history_toolbar.html
diff --git a/chrome/browser/resources/md_history/history_toolbar.html b/chrome/browser/resources/md_history/history_toolbar.html
index 08ce5176e2704f1cfd6ad4bb261fb121138a0b37..7babe09587db0980ee186d67c5182cc08b9bb34f 100644
--- a/chrome/browser/resources/md_history/history_toolbar.html
+++ b/chrome/browser/resources/md_history/history_toolbar.html
@@ -2,6 +2,7 @@
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field.html">
 <link rel="import" href="chrome://history/shared_style.html">
 
@@ -51,10 +52,22 @@
         padding: 0 var(--card-padding-side);
       }
 
+      #right-content {
+        @apply(--layout-center);
+        @apply(--layout-horizontal);
+        justify-content: flex-end;
+      }
+
       #search-input {
         -webkit-padding-end: 20px;
       }
 
+      paper-spinner.search {
+        height: 20px;
+        width: 20px;
+        -webkit-padding-end: 10px;
+      }
+
       #overlay-buttons {
         margin: 0 auto;
         max-width: var(--card-max-width);
@@ -93,6 +106,10 @@
           </paper-button>
         </div>
         <div id="right-content">
+          <div id="searching-spinner" hidden$="[[!searching]]">
+            <paper-spinner class="search" active>

[tsergeant, 2016/04/22 02:18:44]

Nit: Instead of class="search", you can move id="searching-spinner" down to this
paper-spinner and use that in the CSS above.

FYI, we typically only use classes for things where you want the same styling to
apply to multiple different elements. IDs are more useful for applying styles to
a single element.

[lshang, 2016/04/22 04:08:46]

Done.

After I removed the class and moved id "searching-spinner" into paper-spinner, I
feel like there is no benefit to still have a div here? (And the div has no ids,
just a hidden property.) So I use 'searching' to directly control the 'active'
property of paper-spinner. I'm not fully sure this is appropriate, but if you
feel ok with this, I might change the loading spinner as well, because I found
that it looks more smooth when the spinner switches between active/not-active
mode. It has a fade-in/fade-out effect.
Got it!:-)

+            </paper-spinner>
+          </div>
           <cr-search-field id="search-input" label="$i18n{search}"
               clear-label="$i18n{clearSearch}">
           </cr-search-field>