feat(core): add loading spinner to AutoComplete Editor/Filter (#556)

* feat(filters): add loading spinner to AutoComplete Editor/Filter
- add SASS styling to use the jQuery UI loading styling (internally jQuery UI will automatically add the CSS class "ui-autocomplete-loading" whenever processing) which shows up after few milliseconds (when using remote calls)

Author: ghiscoding

src/app/modules/angular-slickgrid/editors/autoCompleteEditor.ts

@@ -265,6 +265,9 @@ export class AutoCompleteEditor implements Editor {
         }
       });
 
+    // add a <span> in order to add spinner styling
+    $(`<span></span>`).appendTo(this.args.container);
+
     // user might pass his own autocomplete options
     const autoCompleteOptions: AutocompleteOption = this.columnEditor.editorOptions;
 

src/app/modules/angular-slickgrid/filters/autoCompleteFilter.ts

@@ -368,7 +368,12 @@ export class AutoCompleteFilter implements Filter {
 
     // append the new DOM element to the header row
     if ($filterElm && typeof $filterElm.appendTo === 'function') {
-      $filterElm.appendTo($headerElm);
+      const $container = $(`<div class="autocomplete-container"></div>`);
+      $container.appendTo($headerElm);
+      $filterElm.appendTo($container);
+
+      // add a <span> in order to add spinner styling
+      $(`<span></span>`).appendTo($container);
     }
 
     return $filterElm;

src/app/modules/angular-slickgrid/styles/_variables.scss

@@ -145,6 +145,12 @@ $autocomplete-border-radius:	                  4px !default;
 $autocomplete-box-shadow:	                      0 6px 12px rgba(0, 0, 0, 0.175) !default;
 $autocomplete-hover-color:	                    #262626 !default;
 $autocomplete-hover-bg-color:	                  darken($row-mouse-hover-color, 3%) !default;
+$autocomplete-loading-icon:                     "\f021" !default;
+$autocomplete-loading-icon-color:               $icon-color !default;
+$autocomplete-loading-icon-width:               inherit !default;
+$autocomplete-loading-icon-margin-left:         -16px !default;
+$autocomplete-loading-icon-line-height:         0px !default;
+$autocomplete-loading-icon-vertical-align:      inherit !default;
 $autocomplete-max-height:	                      25vh !default;
 $autocomplete-min-height:	                      75px !default;
 $autocomplete-min-width:	                      50px !default;
@@ -363,7 +369,7 @@ $header-menu-button-border:                     $header-menu-border !default;
 $header-menu-button-border-width:               0px !default;
 $header-menu-button-height:                     35px !default;
 $header-menu-button-icon:                       "\f13a" !default;
-$header-menu-button-icon-color:                 inherit !default;
+$header-menu-button-icon-color:                 $icon-color !default;
 $header-menu-button-icon-font-size:             14px !default;
 $header-menu-button-icon-font-weight:           normal !default;
 $header-menu-button-icon-width:                 14px !default;

src/app/modules/angular-slickgrid/styles/bootstrap-jquery-ui-autocomplete.scss

@@ -4,6 +4,9 @@
 // jQuery UI AutoComplete for Bootstrap
 // ---------------------------------------------------------
 
+.autocomplete-container {
+  display: flex;
+}
 .ui-autocomplete {
   position: absolute;
   z-index: $autocomplete-z-index;
@@ -33,6 +36,25 @@
   }
 }
 
+/* jquery ui loading spinner */
+@keyframes md-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.ui-autocomplete-loading {
+  & + span:after {
+    animation: md-spin 2s infinite linear;
+    display: inline-block;
+    font-family: $icon-font-family;
+    color: $autocomplete-loading-icon-color;
+    content: $autocomplete-loading-icon !important; /* important is required to override default jquery-ui styling */
+    width: $autocomplete-loading-icon-width;
+    margin-left: $autocomplete-loading-icon-margin-left;
+    line-height: $autocomplete-loading-icon-line-height;
+    vertical-align: $autocomplete-loading-icon-vertical-align;
+  }
+}
+
 .ui-state-hover,
 .ui-state-active,
 .ui-state-focus {

src/app/modules/angular-slickgrid/styles/material-svg-icons.scss

@@ -0,0 +1,36 @@
+@-webkit-keyframes md-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+@keyframes md-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+@mixin md-icon-rotate($degrees, $rotation) {
+  transform: rotate($degrees);
+}
+
+.mdi {
+  &.mdi-flip-h {
+    transform: scaleX(-1);
+  }
+  &.mdi-flip-v {
+    transform: scaleY(-1);
+  }
+  &.mdi-pulse {
+    animation: md-spin 1s infinite steps(8);
+  }
+  &.mdi-spin {
+    animation: md-spin 2s infinite linear;
+  }
+  &.mdi-rotate-45  { @include md-icon-rotate(45deg, 1);  }
+  &.mdi-rotate-90  { @include md-icon-rotate(90deg, 1);  }
+  &.mdi-rotate-135 { @include md-icon-rotate(135deg, 2); }
+  &.mdi-rotate-180 { @include md-icon-rotate(180deg, 2); }
+  &.mdi-rotate-220 { @include md-icon-rotate(220deg, 3); }
+  &.mdi-rotate-270 { @include md-icon-rotate(270deg, 3); }
+  &.mdi-rotate-315 { @include md-icon-rotate(315deg, 3); }
+  &.mdi-rotate-45, .mdi-rotate-90, .mdi-rotate-135, .mdi-rotate-180, .mdi-rotate-220 .mdi-rotate-270, .mdi-rotate-315 {
+    filter: none;
+  }
+}