Make search boxes not usable and visually show this while fetching orgs and spaces

components/app-framework/i18n/en_US/app-framework.json

@@ -4,5 +4,8 @@
   },
   "code-block": {
     "copied-msg": "Copied to clipboard"
+  },
+  "search-box": {
+    "busy": "Loading ..."
   }
 }

components/app-framework/src/widgets/search-box/search-box.directive.js

@@ -54,7 +54,8 @@
         placeholder: '@?',
         searchIcon: '@?',
         disabled: '=?',
-        translateOptionLabels: '=?'
+        translateOptionLabels: '=?',
+        busy: '=?'
       },
       controller: SearchBoxController,
       controllerAs: 'searchBoxCtrl',

components/app-framework/src/widgets/search-box/search-box.html

@@ -1,10 +1,13 @@
-<div ng-click="searchBoxCtrl.openIt()" class="search-box" ng-class="{ open: searchBoxCtrl.open, disabled: searchBoxCtrl.disabled}">
+<div ng-click="!searchBoxCtrl.busy && searchBoxCtrl.openIt()" class="search-box" ng-class="{ open: searchBoxCtrl.open, disabled: searchBoxCtrl.disabled || searchBoxCtrl.busy}">
+  <div class="search-box-busy" ng-if="searchBoxCtrl.busy" translate>search-box.busy</div>
   <input type="text"
          ng-change="searchBoxCtrl.onChange()"
          ng-model="searchBoxCtrl.searchText"
          ng-keydown="searchBoxCtrl.onKeyDown($event)"
+         ng-show="!searchBoxCtrl.busy"
          placeholder="{{ searchBoxCtrl.placeholder }}" ng-disabled="searchBoxCtrl.disabled"/>
   <i class="search-icon material-icons"
+     ng-show="!searchBoxCtrl.busy"
      ng-class="searchBoxCtrl.searchIcon || 'search-icon-icon'"></i>
 
   <ul ng-show="searchBoxCtrl.open" class="dropdown-menu">

components/app-framework/src/widgets/search-box/search-box.scss

@@ -70,6 +70,14 @@ search-box {
       }
     }
   }
+
+  .search-box-busy {
+    padding: 0;
+    margin-bottom: $padding-base-vertical;
+    height: $line-height-computed;
+    line-height: $line-height-computed;
+    margin-top: $console-form-margin-top;    
+  }
 }
 
 .form-group-large {

components/app-theme/src/scss/style/components/_forms.scss

@@ -35,6 +35,10 @@ form, [ng-form] {
       width: $console-input-width * 1.25;
     }
 
+    &.form-group-busy {
+      background-color: $gray-lighter;
+    }
+
     label {
       color: $console-input-label-fg;
       font-weight: normal;

components/cloud-foundry/frontend/src/view/util/deploy-location/deploy-location.directive.js

@@ -55,6 +55,9 @@
       vm.organizations = [];
       vm.spaces = [];
 
+      vm.loadingOrganizations = true;
+      vm.loadingSpaces = true;
+
       if (initialServiceInstance && initialServiceInstance !== 'all') {
         // Find the option to set. If the user has no permissions this may be null
         var preSelectedService = _.find(vm.serviceInstances, {value: {guid: initialServiceInstance}}) || {};
@@ -91,6 +94,8 @@
     function getOrganizations() {
       var cnsiGuid = vm.serviceInstance.guid;
       vm.organizations.length = 0;
+      vm.loadingOrganizations = true;
+      vm.loadingSpaces = true;
 
       return cfOrganizationModel.listAllOrganizations(cnsiGuid)
         .then(function (organizations) {
@@ -115,6 +120,9 @@
             var preSelectedOrg = _.find(vm.organizations, {value: {metadata: {guid: initialOrganization}}}) || {};
             vm.organization = preSelectedOrg.value;
           }
+        })
+        .finally(function () {
+          vm.loadingOrganizations = false;
         });
     }
 
@@ -128,6 +136,7 @@
     function getSpacesForOrganization(guid) {
       var cnsiGuid = vm.serviceInstance.guid;
       vm.spaces.length = 0;
+      vm.loadingSpaces = true;
 
       return cfOrganizationModel.listAllSpacesForOrganization(cnsiGuid, guid)
         .then(function (spaces) {
@@ -145,6 +154,9 @@
             var preSelectedOrg = _.find(vm.spaces, {value: {metadata: {guid: initialSpace}}}) || {};
             vm.space = preSelectedOrg.value;
           }
+        })
+        .finally(function () {
+          vm.loadingSpaces = false;
         });
     }
 

components/cloud-foundry/frontend/src/view/util/deploy-location/deploy-location.html

@@ -10,22 +10,24 @@
   </search-box>
 </div>
 
-<div class="form-group form-group-large">
+<div class="form-group form-group-large" ng-class="{'form-group-busy': deployLocation.loadingOrganizations}">
   <label class="control-label" required translate>app.deploy-location.org-label</label>
   <search-box
     ng-model="deployLocation.organization"
     input-options="deployLocation.organizations"
     placeholder="{{'app.deploy-location.org-placeholder' | translate}}"
+    busy="deployLocation.loadingOrganizations"
     tabindex="0" required>
   </search-box>
 </div>
 
-<div class="form-group form-group-large">
+<div class="form-group form-group-large"  ng-class="{'form-group-busy': deployLocation.loadingSpaces}">
   <label class="control-label" required translate>app.deploy-location.space-label</label>
   <search-box
     ng-model="deployLocation.space"
     input-options="deployLocation.spaces"
     placeholder="{{'app.deploy-location.space-placeholder' | translate}}"
+    busy="deployLocation.loadingSpaces"
     tabindex="0" required>
   </search-box>
 </div>