3

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.

Marshall Tigerus
  • 3,675
  • 10
  • 37
  • 67

1 Answers1

5

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.

G. Tranter
  • 16,766
  • 1
  • 48
  • 68
  • The form field label text is a nice workaround for this. I'm going to play with these ideas and see what I can get sorted out. – Marshall Tigerus Jul 20 '18 at 14:39
  • @MarshallTigerus I'm looking for some kind of visual indicator as well. Did you ever get this sorted out? – eddyizm Nov 02 '20 at 23:18
  • 1
    @eddyizm It got deprioritized and never implemented. I think the solution that was added was a loading indicator below the element but not in the dropdown itself. – Marshall Tigerus Nov 03 '20 at 20:14
  • @MarshallTigerus Thanks for the update. This may have to hit the backburner on my end as well. :-) – eddyizm Nov 03 '20 at 21:24