Remove redundant markup wrapping spinner and adjust positioning

 - Remove a semantically incorrect `<button>` wrapping the loading
   spinner and a redundant wrapping `<span>`.
 - Vertically center the spinner by adding a wrapper `<div>` in the
   spinner component itself, so that there is less of a visual shift
   when switching between displaying the loading indicator and the
   search bar.
 - Add a meaningful title attribute to the spinner. Properly indicating
   when the sidebar's content is changing/being loaded to ATs requires
   additional work which is not tackled here.

src/sidebar/components/spinner.js

@@ -10,9 +10,11 @@ module.exports = {
   controller: SpinnerController,
   controllerAs: 'vm',
   template: `
-    <span class="spinner">
-      <span><span>
-      </span></span>
-    </span>
+    <div class="spinner__container">
+      <span class="spinner">
+        <span><span>
+        </span></span>
+      </span>
+    </div>
   `,
 };

src/sidebar/templates/search-input.html

@@ -10,7 +10,5 @@
   <button type="button" class="simple-search-icon top-bar__btn" ng-hide="vm.loading">
     <i class="h-icon-search"></i>
   </button>
-  <button type="button" class="simple-search-icon btn btn-clean" ng-show="vm.loading" disabled>
-    <span class="btn-icon"><spinner></spinner></span>
-  </button>
+  <spinner class="top-bar__btn" ng-show="vm.loading" title="Loading…"></spinner>
 </form>

src/styles/sidebar/components/spinner.scss

@@ -15,6 +15,14 @@ $part-height: 3 * $part-width;
   to { transform: rotate(1turn); }
 }
 
+// Container which centers the spinner vertically.
+.spinner__container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+// The actual spinner itself.
 .spinner {
   position: relative;
   display: inline-block;