Angular Material Table Loads When Mouse Hover

Question

I have a main component and a dialog component.

I am fetching data from an API in dialog. I subscribe the data in close function of dialog in main component.

main.component.ts

openDialog() {
    const dialogConfig = new MatDialogConfig();
 
    dialogConfig.disableClose = true;
    dialogConfig.autoFocus = true;
 
    const dialogRef = this.dialog.open(AnAuswahlComponent, dialogConfig);
    this.isLoading = true;
    dialogRef.afterClosed().subscribe((res) => {
      this.changeDetector.detectChanges();
      this.dataSource.data = res.data;
      this.dataSource = new MatTableDataSource<Employee>(res.data);
      this.selection.clear();
    });
    this.isLoading = false;
  }

dialog.component.ts

closeDialog() {
    let selectedData: Employee[] = [];
 
    if (this.isAllSelected()) {
      // If all rows are selected and no filters are applied, get all data
      if (!this.hasActiveFilters()) {
        selectedData = [...this.dataSource.data];
        this.exportedEmployee = selectedData;
      } else {
        // If filters are applied, get the filtered data
        selectedData = [...this.filteredDataSource];
        this.exportedEmployee = selectedData;
      }
    } else {
      // If not all rows are selected, use selectedEmployeeData
      selectedData = [...this.selectedEmployeeData];
      this.exportedEmployee = selectedData;
    }
 
    // Close the dialog with the selected data
    this.dialogRef.close({ data: selectedData });
  }

selectedData is get in dialog and there is no data fetching in main component. But in main component angular material table starts to load when I hover the mouse on the table. And loads very slowly. How can I solve this loading problem?

(I added the table screenshot before hovering.) Empty Table

I expect to load the table without hovering and waiting.