Restyle relation loading autocomplete

app/assets/stylesheets/content/_autocomplete.sass

@@ -104,6 +104,16 @@ div.autocomplete
     background: $nm-color-error-background
     border-color: $nm-color-error-border
 
+// Loading indicator
+.ui-autocomplete--loading
+  border: 1px solid #ccc
+  border-top: none
+  padding: 5px
+  // Position bottom of input
+  position: absolute
+  // With same width as input
+  width: 100%
+
 .ui-autocomplete--category
   padding: 0
   font-weight: bold

app/assets/stylesheets/content/_loading_indicator.sass

@@ -55,6 +55,17 @@
   .block-5
     animation-delay: -0.8s
 
+
+  &.-small
+    height: 34px
+    margin: 0
+    text-align: left
+
+    [class^='block-']
+      width: 4px
+
+
+
 @keyframes block-waveStretchDelay
   0%, 40%, 100%
     transform: scaleY(0.4)

app/assets/stylesheets/content/work_packages/tabs/_relations.sass

@@ -147,3 +147,8 @@
 
   .icon-button
     cursor: not-allowed
+
+// Disable overflow in grid-content of create form
+// To allow results indicator to overflow it
+.wp-relations-create--form .grid-content
+  overflow-y: visible

frontend/app/components/wp-relations/wp-relations-create/dynamic-relation-types.template.html

@@ -15,7 +15,7 @@
     </div>
     <div class="loading-indicator--location"
          data-indicator-name="relationAddDynamic">
-        <div class="grid-block v-align wp-relations-create--form" ng-if="$ctrl.showRelationsCreateForm">
+        <div class="v-align wp-relations-create--form" ng-if="$ctrl.showRelationsCreateForm">
             <div class="grid-content collapse medium-3">
                 <label class="hidden-for-sighted" for="relation-type--select">{{ ::$ctrl.text.relationType }}</label>
                 <select class="form--select relationTypeSelect"

frontend/app/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.directive.ts

@@ -90,10 +90,8 @@ function wpRelationsAutocompleteDirective(
       };
 
       function autocompleteWorkPackages(query:string):Promise<WorkPackageResourceInterface[]> {
-        const deferred = $q.defer();
-        loadingIndicator.indicator(scope.loadingPromiseName).promise = deferred.promise;
-
-        scope.workPackage.available_relation_candidates.$link.$fetch({
+        element.find('.ui-autocomplete--loading').show();
+        return scope.workPackage.available_relation_candidates.$link.$fetch({
             query: query,
             type: scope.filterCandidatesFor
           }, {
@@ -102,10 +100,12 @@ function wpRelationsAutocompleteDirective(
             }
           }).then((collection:CollectionResource) => {
             scope.noResults = collection.count === 0;
-            deferred.resolve(collection.elements);
-          }).catch(() => deferred.reject());
-
-        return deferred.promise;
+            return collection.elements || [];
+          }).catch(() => {
+            return [];
+          }).finally(() => {
+           element.find('.ui-autocomplete--loading').hide();
+        });
       };
 
       scope.$watch('noResults', (noResults:boolean) => {

frontend/app/components/wp-relations/wp-relations-create/wp-relations-autocomplete/wp-relations-autocomplete.template.html

@@ -3,4 +3,13 @@
          class="wp-relations--autocomplete ui-autocomplete--input"
          ng-class="{ '-error': noResults }"
          placeholder="{{ ::text.placeholder }}">
+  <div class="ui-autocomplete--loading" style="display: none">
+    <div class="loading-indicator -small">
+      <div class="block-1"></div>
+      <div class="block-2"></div>
+      <div class="block-3"></div>
+      <div class="block-4"></div>
+      <div class="block-5"></div>
+    </div>
+  </div>
 </form>