add a loading spinner inside the options of a datalist (angular

Question

<input  list="dataUsers"  formControlName="user" placeholder="Type the user name" class="form-control form-control-lg" type="text" (ngModelChange)="doSearch($event)"/>
    <datalist id="dataUsers">
          <option *ngFor="let u of users$ | async" [value]="u">
              {{u}}
          </option>
    </datalist>

the .ts file:

 users$: Observable<string[]> = this.searchUser$.pipe(
    debounceTime(500),
    switchMap(searchUserText =>{
        return this._service.search(searchUserText)
    }),
    map((info: string[])=>{
        return info
    })


 searchUser$ = new BehaviorSubject<string>('')

 doSearch($event: any){
    this.searchUser$.next($event)
  }

Like the title said, I wanna add a loading spinner until the users$ get the informations from the api.

I thought about using angular material but for some reason that entire library doesn't work with the dependencies that I have

Answer 1

You can use ngx-spinner. Seems like it's compatible with a lot of angular versions. https://www.npmjs.com/package/ngx-spinner

If you're adding a spinner you might want to put that on a container div or span that has your input and data-list in it.

Or you can just use ngIf else:

<div *ngIf="users$;else loading">
  <input  list="dataUsers"  formControlName="user" placeholder="Type the user name" class="form-control form-control-lg" type="text" (ngModelChange)="doSearch($event)"/>
  <datalist id="dataUsers">
        <option *ngFor="let u of users$ | async" [value]="u">
            {{u}}
        </option>
  </datalist>
</div>
<div #loading>
  <div class="loader"></div>
</div>

And your css:

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}