MD History: show and hide search spinner and icon the same way

ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar_search_field.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-input/iron-input.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-input/paper-input-container.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_search_field/cr_search_field_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 
 <dom-module id="cr-toolbar-search-field">
   <template>
@@ skipping 13 matching lines @@
 
       paper-icon-button {
         height: 32px;
         margin: 6px;
         padding: 6px;
         width: 32px;
       }
 
       #icon {
         --paper-icon-button-ink-color: white;
+      }
+
+      #icon,
+      paper-spinner-lite {
         transition: opacity 150ms;

[Dan Beam, 2016/06/16 23:25:35]

#icon's visibility change was effectively taking 150ms, whereas the spinner was
immediate

[tsergeant, 2016/06/29 04:06:37]

Maybe increase this to 200 or 250ms to smooth out the animation a bit more? It
looks a bit abrupt to me at 150ms (when signed in, doing a search that takes
more than half a second).

[Dan Beam, 2016/06/29 19:22:28]

upped to 200, feel free to tweak

       }
 
       #prompt {
         visibility: hidden;
       }
 
       paper-spinner-lite {
         --paper-spinner-color: white;
         height: 20px;
         margin: 0 6px;
+        opacity: 0;
         padding: 6px;
         position: absolute;
         width: 20px;
       }
 
+      paper-spinner-lite[active] {
+        opacity: 1;
+      }
+
       paper-input-container {
         --paper-input-container-input-color: white;
         --paper-input-container-underline: {
           display: none;
         };
         --paper-input-container-underline-focus: {
           display: none;
         };
         --paper-input-container-label: {
           color: inherit;
@@ skipping 53 matching lines @@
       <input is="iron-input" id="searchInput" type="search"
           on-blur="onInputBlur_" incremental></input>
     </paper-input-container>
     <paper-icon-button icon="cr:cancel" id="clearSearch"
         title="[[clearLabel]]" hidden$="[[!hasSearchText]]"
         on-tap="hideSearch_">
     </paper-icon-button>
   </template>
   <script src="cr_toolbar_search_field.js"></script>
 </dom-module>