diff --git a/modules/portal/app/views/zones/zones.scala.html b/modules/portal/app/views/zones/zones.scala.html
index 52ab8b759..9c56548df 100644
--- a/modules/portal/app/views/zones/zones.scala.html
+++ b/modules/portal/app/views/zones/zones.scala.html
@@ -144,6 +144,9 @@
                         </div>
                     </div>
                 </div>
+                <div class="modal fade" id="loader" tabindex="-1" role="dialog" >
+                    <div class="spinner" ></div>
+                </div>
                 <div class="tab-pane" id="allZones">
                     <div class="row">
                         <div class="col-md-12">
diff --git a/modules/portal/public/lib/services/zones/service.zones.js b/modules/portal/public/lib/services/zones/service.zones.js
index 4ac031860..2273421e9 100644
--- a/modules/portal/public/lib/services/zones/service.zones.js
+++ b/modules/portal/public/lib/services/zones/service.zones.js
@@ -30,7 +30,16 @@ angular.module('service.zones', [])
                 "ignoreAccess": ignoreAccess
             };
             var url = groupsService.urlBuilder("/api/zones", params);
-            return $http.get(url);
+            let loader = $("#loader");
+            loader.modal({
+                          backdrop: "static", //remove ability to close modal with click
+                          keyboard: false, //remove option to close with keyboard
+                          show: true //Display loader!
+                          })
+            let promis =  $http.get(url);
+            // Hide loader when api gets response
+            promis.then(()=>loader.modal("hide"), ()=>loader.modal("hide"))
+            return promis
         };
 
         this.getBackendIds = function() {