ng-select server side loading icon incorrect placement

Question

I am using ng-select in my Angular 9 project to search and load server-side results. I followed the instructions from ng-select docs and implemented it. When the user starts typing I see loading icon placement is slightly above(shown below). I am not using any extra style sheets or CSS rules.

HTML:

          <ng-select [items]="allPersons | async"
                           bindLabel="customName"
                           placeholder="Search for Person "
                           [hideSelected]="true"
                           [trackByFn]="trackByPersonFn"
                           [minTermLength]="2"
                           [loading]="personLoading"
                           typeToSearchText="Please enter 2 or more characters"
                           [typeahead]="personInput"
                           style="font-size: 14px"
                           (change)="fetchPersonInformation($event)"
                           [formControl]="personControl">
                </ng-select>

Component:

this.allPersons = concat(
  of([]), // default items
  this.personInput.pipe(
    distinctUntilChanged(),
    tap(() => this.personLoading = true),
    switchMap(term => this.personService.findPersonsBySearchString(environment.BASE_URL+PERSON_API_URL+'/find/search/'+term).pipe(
      tap(data =>
      {
        this.personLoading = false;
      })
    ))
  )
);

Answer 1

This is a bug in ng-select with Material Theme.

Try adding this CSS code:

.ng-select .ng-spinner-loader {
    bottom: -15px;
}
.ng-select-multiple .ng-spinner-loader {
    bottom: 0px;
}