diff --git a/views/ngXosLib/xosHelpers/spec/ui/smart-table.test.js b/views/ngXosLib/xosHelpers/spec/ui/smart-table.test.js
index 09445ca..d579ce6 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/smart-table.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/smart-table.test.js
@@ -26,7 +26,7 @@
             last_name: 'Snow',
             hidden_field: 'hidden'
           }
-        ]
+        ];
 
         jasmine.addMatchers({
           toBeInstanceOf: function() {
diff --git a/views/ngXosLib/xosHelpers/src/styles/loader.scss b/views/ngXosLib/xosHelpers/src/styles/loader.scss
new file mode 100644
index 0000000..66297df
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/styles/loader.scss
@@ -0,0 +1,51 @@
+.loader {
+  font-size: 10px;
+  margin: 0 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: loaderSpinner 1.4s infinite linear;
+  transform: translateZ(0);
+}
+.loader:before {
+  width: 50%;
+  height: 50%;
+  background: $brand-primary;
+  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 loaderSpinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file
diff --git a/views/ngXosLib/xosHelpers/src/styles/main.scss b/views/ngXosLib/xosHelpers/src/styles/main.scss
index cc02e6f..a879de2 100644
--- a/views/ngXosLib/xosHelpers/src/styles/main.scss
+++ b/views/ngXosLib/xosHelpers/src/styles/main.scss
@@ -1,5 +1,6 @@
 @import './animations.scss';
 @import '../../../../../views/style/sass/bootstrap/bootstrap/_variables.scss';
+@import './loader.scss';
 
 @import '../ui_components/dumbComponents/table/table.scss';
 @import '../ui_components/dumbComponents/alert/alert.scss';
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
index 04671ba..54f58e9 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/table/table.component.js
@@ -338,7 +338,7 @@
           config: '='
         },
         template: `
-          <div ng-show="vm.data.length > 0">
+          <div ng-show="vm.data.length > 0 && vm.loader == false">
             <div class="row" ng-if="vm.config.filter == 'fulltext'">
               <div class="col-xs-12">
                 <input
@@ -437,15 +437,27 @@
               change="vm.goToPage">
               </xos-pagination>
           </div>
-          <div ng-show="vm.data.length == 0 || !vm.data">
+          <div ng-show="(vm.data.length == 0 || !vm.data) && vm.loader == false">
              <xos-alert config="{type: 'info'}">
               No data to show.
             </xos-alert>
           </div>
+          <div ng-show="vm.loader == true">
+            <div class="loader"></div>
+          </div>
+          <pre>{{vm.loader | json}}</pre>
         `,
         bindToController: true,
         controllerAs: 'vm',
-        controller: function(_){
+        controller: function(_, $scope){
+
+          this.loader = true;
+
+          $scope.$watch(() => this.data, data => {
+            if(angular.isDefined(data)){
+              this.loader = false;
+            }
+          });
 
           if(!this.config){
             throw new Error('[xosTable] Please provide a configuration via the "config" attribute');
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
index 27b1ef6..5334716 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/smartComponents/smartTable/smartTable.component.js
@@ -54,7 +54,7 @@
             return [204];
           });
 
-          $httpBackend.whenGET('/test').respond(200, datas)
+          $httpBackend.whenGET('/test').respond(200, [])
           $httpBackend.whenPOST('/test').respond((method, url, data) => {
             data = angular.fromJson(data);
             data.id = ++count;
@@ -218,6 +218,7 @@
           .then((res) => {
 
             if(!res[0]){
+              this.data = res;
               return;
             }