diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.html b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.html
index 6740b67f6b..d5a49e6006 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/details/details.html
@@ -21,10 +21,15 @@
 
       <div class="form-group">
         <label class="control-label" translate for="availability-zone">Availability Zone</label>
+        <div class="horizon-loading-bar" ng-if="!model.loaded.availabilityZones">
+          <div class="progress progress-striped active">
+            <div class="progress-bar"></div>
+          </div>
+        </div>
         <div class="alert alert-warning"
-             ng-if="model.availabilityZones.length === 0"
+             ng-if="model.loaded.availabilityZones && model.availabilityZones.length === 0"
              translate>There are no Availability Zones.</div>
-        <select ng-if="model.availabilityZones.length !== 0"
+        <select ng-if="model.loaded.availabilityZones && model.availabilityZones.length !== 0"
                 class="form-control"
                 id="availability-zone"
                 ng-options="zone.value as zone.label for zone in model.availabilityZones"
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance-model.service.js b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance-model.service.js
index dbe2b00028..ab06f9c907 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance-model.service.js
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/workflow/launch-instance/launch-instance-model.service.js
@@ -160,6 +160,14 @@
       metadataTree: null,
       hintsTree: null,
 
+      /**
+       * This is to inform users current situation is under loading or not
+       */
+      loaded: {
+        // Availability Zones on Details tab
+        availabilityZones: false
+      },
+
       /**
        * api methods for UI controllers
        */
@@ -204,6 +212,12 @@
       };
     }
 
+    function initializeLoadStatus() {
+      angular.forEach(model.loaded, function(val, key) {
+        model.loaded[key] = false;
+      });
+    }
+
     /**
      * @ngdoc method
      * @name launchInstanceModel.initialize
@@ -219,6 +233,7 @@
       // Each time opening launch instance wizard, we need to do this, or
       // we can call the whole methods `reset` instead of `initialize`.
       initializeNewInstanceSpec();
+      initializeLoadStatus();
 
       if (model.initializing) {
         promise = initPromise;
@@ -236,7 +251,8 @@
         var launchInstanceDefaults = settings.getSetting('LAUNCH_INSTANCE_DEFAULTS');
 
         promise = $q.all([
-          novaAPI.getAvailabilityZones().then(onGetAvailabilityZones, noop),
+          novaAPI.getAvailabilityZones().then(onGetAvailabilityZones)
+            .finally(onGetAvailabilityZonesComplete),
           novaAPI.getFlavors(true, true).then(onGetFlavors, noop),
           novaAPI.getKeypairs().then(onGetKeypairs, noop),
           novaAPI.getLimits(true).then(onGetNovaLimits, noop),
@@ -349,6 +365,10 @@
 
     }
 
+    function onGetAvailabilityZonesComplete() {
+      model.loaded.availabilityZones = true;
+    }
+
     // Flavors
 
     function onGetFlavors(data) {