diff --git a/ui/index.html b/ui/index.html
index 51b4bfe43e..d6ee0f8ee1 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -219,6 +219,17 @@
   </div>
   </script>
 
+  <script type="text/x-handlebars" data-template-name="item/loading">
+    <div class="row">
+      <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
+        <div class="text-center vertical-center">
+          <img src="static/loading-cylon-purple.svg" width="384" height="48">
+          <p><small>Loading...</small></p>
+        </div>
+      </div>
+    </div>
+  </script>
+
   <script type="text/x-handlebars" id="services">
 
     <div {{ bind-attr class=":col-md-5" }}>
diff --git a/ui/javascripts/app/views.js b/ui/javascripts/app/views.js
index fa40441ef7..bac819180f 100644
--- a/ui/javascripts/app/views.js
+++ b/ui/javascripts/app/views.js
@@ -22,14 +22,12 @@ App.ServicesView = Ember.View.extend({
 })
 
 App.ServicesShowView = Ember.View.extend({
-    //
-    // We use the same template as we do for the services
-    // array and have a simple conditional to display the nested
-    // individual service resource.
-    //
     templateName: 'service'
 })
 
+App.ServicesLoadingView = Ember.View.extend({
+    templateName: 'item/loading'
+})
 
 //
 // Nodes
@@ -40,15 +38,12 @@ App.NodesView = Ember.View.extend({
 })
 
 App.NodesShowView = Ember.View.extend({
-    //
-    // We use the same template as we do for the nodes
-    // array and have a simple conditional to display the nested
-    // individual node resource.
-    //
     templateName: 'node'
 })
 
-
+App.NodesLoadingView = Ember.View.extend({
+    templateName: 'item/loading'
+})
 
 App.KvListView = Ember.View.extend({
     templateName: 'kv'