How to optimize a table in angular material - html

Question

im trying to show a list of products, and it does, but the problem is it freeze for 6 or 8 seconds, tha size of the register is 2338, im using entity framework to obtain the register, some idea to solve or optimize
this is the method to get the list from the other class and there i obtain from the entity framework
getProveedor(){
this.apiproveedor.getProveedor().subscribe(response=>{
console.log(response.data);
if(response.exito==1){
this.lst=response.data;
this.resultsLength=this.lst.length;
this.dataSource=response.data;
}
});
getProveedor():Observable<Response>{
return this._http.get<Response>(this.url);
}
this is the html, im using a mat table
<!--
-->
<div>
<mat-toolbar >
<span >Pharmacy Lion</span>
<img src="./assets/img/2.png" class="tama">
</mat-toolbar>
<div>
<a mat-raised-button color="primary" (click)="openAdd()">Nuevo Producto</a>
</div>
<mat-form-field appearance="standard">
<mat-label>Filter</mat-label>
<input matInput placeholder="Buscar Nombre" #input (keyup)="applyFilter($event)">
</mat-form-field>
<table mat-table [dataSource]="lst" class="table"
matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
<ng-container matColumnDef ="IdProducto" class="header-align-right"
mat-sort-header disableClear>
<th mat-header-cell *matHeaderCellDef mat-sort-header >#</th>
<td mat-cell *matCellDef="let element">{{element.idProducto}}</td>
</ng-container>
<ng-container matColumnDef ="Nombre" >
<th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right" >Nombre Producto</th>
<td mat-cell *matCellDef="let element" class="header-align-right">{{element.nombre}}</td>
</ng-container>
<ng-container matColumnDef ="Cantidad">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right"> Cantidad </th>
<td mat-cell *matCellDef="let element" class="header-align-right">{{element.cantidad}}</td>
</ng-container>
<ng-container matColumnDef ="Descripcion">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right">Descripcion</th>
<td mat-cell *matCellDef="let element" class="header-align-right">{{element.descripcion}}</td>
</ng-container>
<ng-container matColumnDef ="Precio">
<th mat-header-cell *matHeaderCellDef mat-sort-header class="header-align-right">Precio</th>
<td mat-cell *matCellDef="let element" class="header-align-right">{{element.precio}}</td>
</ng-container>
<ng-container matColumnDef ="Acciones">
<th mat-header-cell *matHeaderCellDef class="header-align-right margencab" >Acciones</th>
<td mat-cell *matCellDef="let element" class="header-align-right ">
<button (click)="Edit(element)" mat-raised-button color="primary" class="margencab">Editar</button>
<button (click)="delete(element)" mat-raised-button color="Basic" class="margencab">Eliminar</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="Columnas"></tr>
<tr mat-row *matRowDef="let row; columns Columnas"></tr>
</table>
</div>

Answer 1

You could try implementing lazy loading of data, which is mentioned in material docs.

Answer 2

You can implementing server side pagination. You need to send page size and page number along with your existing query parameters. In this way it will be more scalable no matter how many data you have cause you are dealing with small chunk of data each request.
you can find a lot of examples out there. With a quick search I found this article one that seems easier to understand

Answer 3

You could also try to implement virtual-scroller provided by material angular CDK (Common Development Kit).
You can find the details here.