title: Adding a loading indicator to Material Autocomplete
body: <p>I'm working with Material Components for Angular 5, and have a form control that is an autocomplete for that is powered by a service call.  Unfortunately, until the service call is complete, the autocomplete does not show, and due to some network latency issues we are experiencing at the moment, most users are finished typing before the service call completes.  I'd like to show some kind of visual indicator that the autocomplete is loading, but cannot figure out how to do it.</p>
  
  <p>The cheap solution we tried was to populate the autocomplete menu with the work "Loading" however this would require tweaking our filtering so that it didn't immediately get squashed when someone started typing a value that didn't start with l.  </p>
  
  <p>This is the basics of our HTML for one of the fields:</p>
  
  <pre><code>&lt;mat-form-field [hideRequiredMarker]="true"&gt;
      &lt;input matInput [(ngModel)]="size" type="text" 
               placeholder="{{'OPTIONS.SIZE' | translate}}"
               [matAutocomplete]="autoSize"
               readonly="{{!model}}"
               (keyup)="filterSizes()"
               matTooltip="{{ 'OPTIONS.MODEL_REQUIRED' | translate }}" 
               [matTooltipDisabled]="model != ''" /&gt;
  
      &lt;mat-autocomplete #autoSize="matAutocomplete"&gt;
         &lt;mat-option *ngFor="let completeSize of filteredSizeNames" [value]="completeSize"&gt;
            {{completeSize}}
         &lt;/mat-option&gt;
      &lt;/mat-autocomplete&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p>The service call populates the filteredSizeNames variable when it completes.  I looked through <a href="https://material.angular.io/components/autocomplete/api" rel="nofollow noreferrer">the material component pages</a> without much luck figured out a soluation.</p>