Mat pagination is hanging or stuck on pagination

Question

I'm getting data from API server and I'm manipulating the data to required format. I'm looping this in mat accordion each tpa for accordion tpa related porgrams will be there in the accordion Now I have used the mat pagination for arraytoShow (accordions), this is working fine but when i have huge data getting page unresponsive issue

can anyone please suggest any changes here any other approaches using below method

    const result = {};
    for (const item of data) {
      const { program, tpa } = item;
      const key = tpa;
      if (!result[key]) {
        result[key] = {};
      }
      if (!result[key][program]) {
        result[key][program] = [];
      }
      result[key][program].push(item);
    }

    for (const tpa in result) {
      const programs = [];
      for (const program in result[tpa]) {
        const gridData = result[tpa][program];
        const paginatedData = [];
        this.totalPages_grid = Math.ceil(gridData[0]?.totalCount / this.paginationPageSize);
        const startPage = this.paginationConfiq.currentPage * this.paginationConfiq.pageSize;
        const endPage = startPage + this.paginationConfiq.pageSize;
        const pageData = gridData.slice(startPage, endPage);


        paginatedData.push(pageData);

        programs.push({
          program: program,
          paginatedData: paginatedData,
          currentPage: 0,
          totalPages: this.totalPages_grid,
          isLoading: false,
        });
      }
      this.arraysToShow.push({
        tpa: tpa,
        programs: programs
      });
      this.arraysToShow = this.arraysToShow.sort(function (a, b) {
        if (a.tpa < b.tpa) { return -1; }
        if (a.tpa > b.tpa) { return 1; }
        return 0;
      });
    }
  }```
//Pagination in html
<mat-paginator [length]="arraysToShow.length" [pageSize]="paginationConfiq.pageSize"
        [pageIndex]="paginationConfiq.currentPage -1" (page)="onPageChange($event)" showFirstLastButtons>
      </mat-paginator>