diff --git a/views/ngXosViews/diagnostic/src/css/serviceTopology.css b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
index 8b615ec..ebd17e5 100644
--- a/views/ngXosViews/diagnostic/src/css/serviceTopology.css
+++ b/views/ngXosViews/diagnostic/src/css/serviceTopology.css
@@ -193,6 +193,59 @@
     animation:0.5s bounceOutRight ease;
 }
 
+/* LOADER */
+.loader {
+  font-size: 10px;
+  margin: 150px auto;
+  text-indent: -9999em;
+  width: 11em;
+  height: 11em;
+  border-radius: 50%;
+  background: #ffffff;
+  background: -moz-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: -webkit-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: -ms-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
+  position: relative;
+  animation: load3 1.4s infinite linear;
+  transform: translateZ(0);
+}
+.loader:before {
+  width: 50%;
+  height: 50%;
+  background: #105E9E;
+  border-radius: 100% 0 0 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: '';
+}
+.loader:after {
+  background: #fff;
+  width: 75%;
+  height: 75%;
+  border-radius: 50%;
+  content: '';
+  margin: auto;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+
+@keyframes load3 {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
 /* ANIMATIONS */
 
 @keyframes bounceInRight {
diff --git a/views/ngXosViews/diagnostic/src/js/diagnostic.js b/views/ngXosViews/diagnostic/src/js/diagnostic.js
index 2b31f31..63ab420 100644
--- a/views/ngXosViews/diagnostic/src/js/diagnostic.js
+++ b/views/ngXosViews/diagnostic/src/js/diagnostic.js
@@ -8,6 +8,8 @@
       templateUrl: 'templates/diagnostic.tpl.html',
       controllerAs: 'vm',
       controller: function(Subscribers, ServiceRelation){
+        this.loader = true;
+        this.error = false;
         Subscribers.query().$promise
         .then((subscribers) => {
           this.subscribers = subscribers;
@@ -15,6 +17,13 @@
         })
         .then((serviceChain) => {
           this.serviceChain = serviceChain;
+        })
+        .catch(e => {
+          throw new Error(e);
+          this.error = e;
+        })
+        .finally(() => {
+          this.loader = false;
         });
       }
     }
diff --git a/views/ngXosViews/diagnostic/src/js/serviceTopology.js b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
index b358abf..3d602fe 100644
--- a/views/ngXosViews/diagnostic/src/js/serviceTopology.js
+++ b/views/ngXosViews/diagnostic/src/js/serviceTopology.js
@@ -32,6 +32,8 @@
           const width = el.clientWidth - (serviceTopologyConfig.widthMargin * 2);
           const height = el.clientHeight - (serviceTopologyConfig.heightMargin * 2);
 
+          console.log(el.clientWidth, el.clientHeight);
+
           const treeLayout = d3.layout.tree()
             .size([height, width]);
 
diff --git a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
index ff88b49..172b9f7 100644
--- a/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
+++ b/views/ngXosViews/diagnostic/src/templates/diagnostic.tpl.html
@@ -1,16 +1,30 @@
 <div class="container-fluid">
-  <div class="onethird-height">
-    <service-topology service-chain="vm.serviceChain"></service-topology>
+  <div ng-hide="vm.error && vm.loader">
+    <div class="onethird-height">
+      <service-topology service-chain="vm.serviceChain"></service-topology>
+    </div>
+    <div class="twothird-height">
+      <!-- <div class="panel panel-primary subscriber-select">
+        <div class="panel-heading">Select a subscriber:</div>
+        <div class="panel-body">
+          <select class="form-control" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber">
+            <option value="">Select a subscriber...</option>
+          </select>
+        </div>
+      </div> -->
+      <logic-topology ng-if="vm.subscribers" subscribers="vm.subscribers" selected="vm.selectedSubscriber"></logic-topology>
+    </div>
   </div>
-  <div class="twothird-height">
-    <!-- <div class="panel panel-primary subscriber-select">
-      <div class="panel-heading">Select a subscriber:</div>
-      <div class="panel-body">
-        <select class="form-control" ng-options="s as s.name for s in vm.subscribers" ng-model="vm.selectedSubscriber">
-          <option value="">Select a subscriber...</option>
-        </select>
+  <div class="row" ng-show="vm.error">
+    <div class="col-xs-12">
+      <div class="alert alert-danger">
+        {{vm.error}}
       </div>
-    </div> -->
-    <logic-topology ng-if="vm.subscribers" subscribers="vm.subscribers" selected="vm.selectedSubscriber"></logic-topology>
+    </div>
+  </div>
+  <div class="row" ng-show="vm.loader">
+    <div class="col-xs-12">
+      <div class="loader">Loading</div>
+    </div>
   </div>
 </div>
\ No newline at end of file