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.
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.
This is the basics of our HTML for one of the fields:
<mat-form-field [hideRequiredMarker]="true">
<input matInput [(ngModel)]="size" type="text"
placeholder="{{'OPTIONS.SIZE' | translate}}"
[matAutocomplete]="autoSize"
readonly="{{!model}}"
(keyup)="filterSizes()"
matTooltip="{{ 'OPTIONS.MODEL_REQUIRED' | translate }}"
[matTooltipDisabled]="model != ''" />
<mat-autocomplete #autoSize="matAutocomplete">
<mat-option *ngFor="let completeSize of filteredSizeNames" [value]="completeSize">
{{completeSize}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
The service call populates the filteredSizeNames variable when it completes. I looked through the material component pages without much luck figured out a soluation.
Use an indeterminate progress indicator bound to a "loading" variable that gets "turned on" when the service call starts and turned off when the service returns. One way is to place a progress circle in the form field as a prefix or suffix. You could also use a progress bar that is styled to position it directly over the form-field's underline (this is a lot of work to get the position just right, but it can be done and looks quite slick).
An easier solution would be to just use the form field label text updated the same way.