I have a form I am working on with Angular JS. This form has multiple dropdown fields and input fields that search through datalists. These datalists and dropdown fields are being populated with data from some api's. One of the datalists is calling an api which returns ~40,000 records, so when opening up this form, this datalist with all those records causes the page to take a while to fully load. (Can't start filling out the form until everything is loaded)

Is there any way I could limit the results this datalist displays to improve loading time but still have all the records available for a user to search through?

HTML:

<div>
   <mat-form-field floatLabel="auto" class="frame-mat-input required">
      <mat-label style="font-size: 14px;">PRIMARY CLIENT</mat-label>
      <input matInput type="text" list="client" (change)="saveCode3($event)">
      <datalist id="client">
         <option *ngFor="let pc of primClient" [value]="pc">{{pc}}</option>
      </datalist>
   </mat-form-field>
</div>

Typescript:

//Call to get clients returns 40,000+ records
  getClients() {
    this.httpClient.get<any>('http://localhost:3000/client').subscribe(
      response => {
        // console.log(response[0])
        for (let i = 0; i < response.length; i++) {
          if (response[i].Country == 'CA' && response[i].Status == 'A') {
            this.primClient.push(response[i].Name)
          }
        }
      }
    )
  }
primClient: any = [];
//Filters through datalist based on user input. Way to limit results here to improve efficiency?
public saveCode3(e: any): void {
let find = this.primClient.find((x: { name: any; }) => x?.name === e.target.value);
}