Style select list loading area similar to command panel

src/app/select-list.coffee

@@ -12,7 +12,8 @@ class SelectList extends View
     @div class: @viewClass(), =>
       @subview 'miniEditor', new Editor(mini: true)
       @div class: 'error', outlet: 'error'
-      @div class: 'loading', outlet: 'loading'
+      @div class: 'loading', outlet: 'loadingArea', =>
+        @span outlet: 'loading'
       @ol outlet: 'list'
 
   @viewClass: -> 'select-list'

static/select-list.less

@@ -5,6 +5,26 @@
     font-weight: bold;
   }
 
+  .loading {
+    text-align: center;
+
+    span {
+      padding: 5px 10px 5px 10px;
+      text-align: center;
+      border-radius: 3px;
+
+      &:before {
+        font-family: 'Octicons Regular';
+        font-size: 1.1em;
+        width: 1.1em;
+        height: 1.1em;
+        margin-right: 5px;
+        -webkit-font-smoothing: antialiased;
+        content: '\f09e';
+      }
+    }
+  }
+
   ol {
     position: relative;
     overflow-y: auto;

themes/atom-dark-ui/select-list.less

@@ -4,6 +4,17 @@
     text-shadow: 0 1px 0 #4E0000;
   }
 
+  .loading {
+    color: #ccc;
+
+    span {
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-top: 1px solid rgba(0, 0, 0, 1);
+      border-left: 1px solid rgba(0, 0, 0, 1);
+      background-color: #111;
+    }
+  }
+
   ol {
     border: 1px solid #212121;
 

themes/atom-light-ui/select-list.less

@@ -9,6 +9,15 @@
     text-shadow: 0 1px 0 #4E0000;
   }
 
+  .loading {
+    color: #333;
+
+    span {
+      border: 1px solid rgba(0, 0, 0, 0.1);
+      background-color: #dedede;
+    }
+  }
+
   ol {
     border: 1px solid #d2d2d2;