Angular material table is so slow even I have few rows

Question

I having an issue on angular material table is loading data so slow even I have few rows to show, My network in console shows that data is present but doesn't get rendered in table, sometimes it takes up to 6,7 mins to display data. I've been searching for solutions I found that who experienced this problem said to do pagination but this is for huge data but this is just few rows and I faced this.

This is network screenshot:

this is my table ui:

this is my table:

<table class="w-full bg-transparent" mat-table matSort [dataSource]="tasks" [trackBy]="trackByFn"
  #recentTransactionsTable>
  <!-- Transaction ID -->
  <ng-container matColumnDef="id">
    <th mat-header-cell mat-sort-header *matHeaderCellDef> Identifier </th>
    <td mat-cell *matCellDef="let task">
      <span class="pr-6 font-medium text-sm text-secondary whitespace-nowrap">
        {{task.taskId}}
      </span>
    </td>
  </ng-container>

  <ng-container matColumnDef="name">
    <th mat-header-cell mat-sort-header *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let task">
      <span class="pr-6 whitespace-nowrap">
        {{task.name}}
      </span>
    </td>
  </ng-container>


  <!-- Date -->
  <ng-container matColumnDef="createTime">
    <th mat-header-cell mat-sort-header *matHeaderCellDef> Create Time </th>
    <td mat-cell *matCellDef="let task">
      <span class="pr-6 whitespace-nowrap">
        {{task.createTime | date:'MM/dd/y'}}
      </span>
    </td>
  </ng-container>

  <!-- Name -->
  <ng-container matColumnDef="assignee">
    <th mat-header-cell mat-sort-header *matHeaderCellDef> Assignee </th>
    <td mat-cell *matCellDef="let task">
      <span class="pr-6 whitespace-nowrap">
        {{task.assignee}}
      </span>
    </td>
  </ng-container>

  <!-- Amount -->
  <ng-container matColumnDef="description">
    <th mat-header-cell mat-sort-header *matHeaderCellDef>
      Description
    </th>
    <td mat-cell *matCellDef="let task">
      <span class="pr-6 whitespace-nowrap">
        {{task.description}}
      </span>
    </td>
  </ng-container>

  <!-- Status -->
  <ng-container matColumnDef="action">
    <th mat-header-cell mat-sort-header *matHeaderCellDef>
      Action
    </th>
    <td mat-cell *matCellDef="let task">
      <button mat-mini-fab color="primary" style="transform: scale(0.8)" [routerLink]="[task.taskId]">
        <span class="inline-flex items-center">
          <mat-icon svgIcon="feather:share-2"></mat-icon>
        </span>
      </button>
    </td>
  </ng-container>

  <!-- Footer -->
  <ng-container matColumnDef="recentOrdersTableFooter">
    <td class="py-6 px-0 border-0" mat-footer-cell *matFooterCellDef colspan="6">
      <button mat-stroked-button>See all transactions</button>
    </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="recentTransactionsTableColumns"></tr>
  <tr class="order-row h-16" mat-row *matRowDef="let row; columns: recentTransactionsTableColumns;"></tr>
  <tr class="h-16 border-0" mat-footer-row *matFooterRowDef="['recentOrdersTableFooter']"></tr>
</table>