add svg animation of received state

app/components/jobs-item.coffee

@@ -7,6 +7,11 @@ JobsItemComponent = Ember.Component.extend
   classNameBindings: ['job.state']
   classNames: ['tile', 'tile--jobs', 'row']
 
+  isBooting: (->
+    if @get('job.state') == 'received'
+      return true
+  ).property('job.state')
+
   languages: (->
     output = []
 

app/styles/app.scss

@@ -25,6 +25,8 @@
 @import "app/components/sync-button";
 @import "app/components/loading-indicator";
 
+@import "app/animations/booting-state";
+
 @import "app/modules/section";
 @import "app/modules/loader";
 @import "app/modules/tiles";

app/styles/app/animations/booting-state.sass

@@ -0,0 +1,18 @@
+.svg-booting
+  .bubble
+    transform-origin: center center
+    animation: bubbleScale 1.2s infinite linear
+
+  .bubble:nth-of-type(2)
+    animation-delay: 0.35s
+
+  .bubble:nth-of-type(3)
+    animation-delay: 0.7s
+
+
+@keyframes bubbleScale
+  0%, 80%, 100%
+    transform: scale(0)
+
+  40%
+    transform: scale(1.0)

app/styles/app/layouts/build-job.sass

@@ -38,6 +38,9 @@
   .tile-status--job
     width: 2em
 
+    .svg-booting
+      margin: 0.7em 0.3em
+
   .jobs-item
     padding: .1em 0
     .icon

app/styles/app/modules/icons.sass

@@ -134,7 +134,6 @@
   background-image: inline-image('svg/icon-job-errored.svg')
 .icon--job.started,
 .icon--job.created,
-.icon--job.received,
 .icon--job.queued,
 .icon--started-yellow
   background-image: inline-image('svg/icon-job-started.svg')

app/templates/components/jobs-item.hbs

@@ -1,6 +1,16 @@
 {{#link-to "job" repo job}}
   <div class="tile-status tile-status--job">
-    <span class="icon icon--job {{job.state}}"></span>
+    {{#if isBooting}}
+      <svg class="svg-booting" version="1.1" width="30" height="12" viewBox="0 0 10 10" preserveAspectRatio="xMinYMid meet">
+        <g>
+          <circle class="bubble" fill="#CDBC2C" cx="7.686" cy="7.369" r="2"/>
+          <circle class="bubble" fill="#D6C826" cx="13.143" cy="7.369" r="2"/>
+          <circle class="bubble" fill="#D6C826" cx="2.232" cy="7.369" r="2"/>
+        </g>
+      </svg>
+    {{else}}
+      <span class="icon icon--job {{job.state}}"></span>
+    {{/if}}
   </div>
 
   <p class="job-id jobs-item build-status">