Use loading octicon in command panel

This removes the SVG spinner which had been incorrectly
rendering since the bootstrap upgrade due to box sizing
issues.

src/packages/command-panel/lib/command-panel-view.coffee

@@ -12,7 +12,8 @@ module.exports =
 class CommandPanelView extends View
   @content: ->
     @div class: 'command-panel tool-panel', =>
-      @div class: 'loading is-loading', outlet: 'loadingMessage', 'Searching...'
+      @div class: 'loading is-loading', outlet: 'loadingMessage', =>
+        @span 'Searching...'
       @div class: 'header', outlet: 'previewHeader', =>
         @button outlet: 'collapseAll', class: 'btn btn-mini pull-right', 'Collapse All'
         @button outlet: 'expandAll', class: 'btn btn-mini pull-right', 'Expand All'

src/packages/command-panel/stylesheets/command-panel.less

@@ -3,17 +3,28 @@
   padding: 0;
 
   .is-loading {
-    display: block;
+    margin-bottom: 10px;
-    margin: 0 auto 10px auto;
+    text-align: center;
-    width: 100px;
+
-    background-color: #111111;
+    span {
-    background-size: auto;
+      padding: 5px 10px 5px 10px;
-    background-position: 5px 5px;
+      background-color: #111111;
-    padding: 5px 5px 10px 30px;
+      text-align: center;
-    border-radius: 3px;
+      border-radius: 3px;
-    border: 1px solid rgba(255,255,255,0.1);
+      border: 1px solid rgba(255,255,255,0.1);
-    border-top: 1px solid rgba(0,0,0,1);
+      border-top: 1px solid rgba(0,0,0,1);
-    border-left: 1px solid rgba(0,0,0,1);
+      border-left: 1px solid rgba(0,0,0,1);
+
+      &:before {
+        font-family: 'Octicons Regular';
+        font-size: 14px;
+        width: 14px;
+        height: 14px;
+        margin-right: 5px;
+        -webkit-font-smoothing: antialiased;
+        content: '\f09e';
+      }
+    }
   }
 
   .preview-count {

static/images/spinner.svg

@@ -1,30 +0,0 @@
-<?xml version='1.0' standalone='no'?>
-<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
-<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='20px' height='20px'>
-  <g>
-<circle cx='10' cy='2' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0s' />
-</circle>
-<circle cx='15.6569' cy='4.3431' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.1s' />
-</circle>
-<circle cx='18' cy='10' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.2s' />
-</circle>
-<circle cx='15.6569' cy='15.6569' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.3s' />
-</circle>
-<circle cx='10' cy='18' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.4s' />
-</circle>
-<circle cx='4.3431' cy='15.6569' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.5s' />
-</circle>
-<circle cx='2' cy='10' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.6s' />
-</circle>
-<circle cx='4.3431' cy='4.3431' r='2' style='opacity:0;fill:#fff'>
-  <animate attributeType='CSS' attributeName='opacity' from='1' to='0' dur='0.8s' repeatCount='indefinite' begin='0.7s' />
-</circle>
-  </g>
-</svg>

static/root-view.less

@@ -72,15 +72,3 @@ html, body {
   font-weight: normal;
   font-style: normal;
 }
-
-.is-loading {
-  background-image: url(images/spinner.svg);
-  background-repeat: no-repeat;
-  width: 14px;
-  height: 14px;
-  opacity: 0.5;
-  background-size: contain;
-  position: relative;
-  display: inline-block;
-  padding-left: 19px;
-}