From 69d6f9e8a1856aa43cd974c111e936c9484917f8 Mon Sep 17 00:00:00 2001
From: Piotr Sarnacki <drogus@gmail.com>
Date: Wed, 18 Mar 2015 11:35:25 +0100
Subject: [PATCH] Add loading indicator for jobs list

This also fixes an occasional bug which occurs when jobs list is being
displayed, but job data is not loaded yet and links are not rendering
properly.
---
 app/templates/jobs.hbs | 98 ++++++++++++++++++++++--------------------
 1 file changed, 51 insertions(+), 47 deletions(-)

diff --git a/app/templates/jobs.hbs b/app/templates/jobs.hbs
index 7ad45d1e..f1b3229e 100644
--- a/app/templates/jobs.hbs
+++ b/app/templates/jobs.hbs
@@ -15,61 +15,65 @@
     {{#each job in view.jobs}}
       {{#view 'jobs-item' context=job}}
         <div {{bind-attr class=":tile :tile--jobs :row job.state" }}>
-          {{#link-to "job" repo job}}
+          {{#if job.config}}
+            {{#link-to "job" job.repo job}}
 
-            <div class="tile-status tile-status--job">
-              <span {{bind-attr class=":icon :icon--job job.state"}}></span>
-            </div>
+              <div class="tile-status tile-status--job">
+                <span {{bind-attr class=":icon :icon--job job.state"}}></span>
+              </div>
 
-            <p class="job-id jobs-item build-status">
-              <span class="icon icon--hash"></span>
-              {{#if job.id}}
-                {{#if job.repo.slug}}
-                  {{number}}
+              <p class="job-id jobs-item build-status">
+                <span class="icon icon--hash"></span>
+                {{#if job.id}}
+                  {{#if job.repo.slug}}
+                    {{number}}
+                  {{/if}}
                 {{/if}}
+              </p>
+
+              <p {{bind-attr class=":job-os :jobs-item :build-os config.os"}}>
+                <span {{bind-attr class=":icon config.os"}}></span>
+                {{!-- {{config.os}} --}}
+              </p>
+
+              {{#if view.languages}}
+                <p class="job-lang jobs-item build-lang">
+                  <span class="icon icon--lang"></span>
+                  {{view.languages}}
+                </p>
+              {{else}}
+                <p class="job-lang jobs-item build-lang is-empty">
+                  <span class="icon icon--lang"></span>
+                  no language set
+                </p>
+              {{/if}}
+              
+              {{#if config.env}}
+                <p class="job-env jobs-item build-env">
+                  <span class="icon icon--env"></span>
+                  {{config.env}}
+                </p>
+              {{else}}
+                <p class="job-env jobs-item build-env is-empty">
+                  <span class="icon icon--env"></span>
+                  no environments set
+                </p>
               {{/if}}
-            </p>
 
-            <p {{bind-attr class=":job-os :jobs-item :build-os config.os"}}>
-              <span {{bind-attr class=":icon config.os"}}></span>
-              {{!-- {{config.os}} --}}
-            </p>
-
-            {{#if view.languages}}
-              <p class="job-lang jobs-item build-lang">
-                <span class="icon icon--lang"></span>
-                {{view.languages}}
+              <p class="job-duration jobs-item" {{bind-attr title="startedAt"}}>
+                <span class="icon icon--clock"></span>
+                {{format-duration duration}}
               </p>
-            {{else}}
-              <p class="job-lang jobs-item build-lang is-empty">
-                <span class="icon icon--lang"></span>
-                no language set
-              </p>
-            {{/if}}
-            
-            {{#if config.env}}
-              <p class="job-env jobs-item build-env">
-                <span class="icon icon--env"></span>
-                {{config.env}}
-              </p>
-            {{else}}
-              <p class="job-env jobs-item build-env is-empty">
-                <span class="icon icon--env"></span>
-                no environments set
-              </p>
-            {{/if}}
 
-            <p class="job-duration jobs-item" {{bind-attr title="startedAt"}}>
-              <span class="icon icon--clock"></span>
-              {{format-duration duration}}
-            </p>
+              {{!-- <p class="" {{bind-attr title="formattedFinishedAt"}}>
+                <span class="icon icon--cal"></span>
+                {{format-time finishedAt}}
+              </p> --}}
 
-            {{!-- <p class="" {{bind-attr title="formattedFinishedAt"}}>
-              <span class="icon icon--cal"></span>
-              {{format-time finishedAt}}
-            </p> --}}
-
-          {{/link-to}}
+            {{/link-to}}
+          {{else}}
+            <span class="sync-spinner sync-spinner--grey"><i></i><i></i><i></i></span>
+          {{/if}}
         </div>
       {{/view}}
       {{!-- {{job.configKeys}} --}}