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..03cba3c3c7be35a9184a83f8de920b1156166319 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;
       }
 
+      #searching-spinner {
+        height: 20px;
+        width: 20px;
+        -webkit-padding-end: 10px;
+      }
+
       #overlay-buttons {
         margin: 0 auto;
         max-width: var(--card-max-width);
@@ -93,6 +106,8 @@
           </paper-button>
         </div>
         <div id="right-content">
+          <paper-spinner id="searching-spinner" active="[[searching]]">
+          </paper-spinner>
           <cr-search-field id="search-input" label="$i18n{search}"
               clear-label="$i18n{clearSearch}">
           </cr-search-field>