bug(mat-table): Application freezing while loading large dataset using mat-table

[aninymous]

Reproduction

Here's the StackBlitz to reproduce the issue:

• Angular 10.2.1 & Material 10.2.6
  https://stackblitz.com/edit/angular-m4j2ir?file=src%2Fapp%2Ftable-basic-example.ts

• Angular 12.0.5 & Material 12.0.4
  https://stackblitz.com/edit/angular-pwnynq?file=src%2Fapp%2Ftable-basic-example.ts

Steps to reproduce:

1. Add a sufficiently large value to the const SIZE (For example: 10000 i.e. 10000 rows to be generated and shown in the table)
2. Click on Load large Data button
3. It takes quite some time to render the table rows and while the rendering is still in progress, the completely application gets frozen, not allowing the user to do any activity on the screen. (This can be checked by trying to click on Try clicking me button when the loading of data is in progress.

Expected Behavior

• The complete application should not freeze while the table is still rendering the data.
• The data rendering performance for large dataset should be optimized. If that's not possible, a recommended maximum limit of data rows should be documented, which the table can at-once render without major performance bottlenecks, which can give developers enough feedback to take decisions on the usage of the component.

Actual Behavior

What behavior did you actually see?

• When the table is rendering the data, complete application gets frozen. The user cannot do any activity on other components in the application (for e.g. click, hover etc) till the time the mat table rendering is in progress.
• It takes quite a lot of time to load around 5000+ rows with minimum textual data (4 columns with no additional css styles)

Environment

• Angular: 10.2.1 & 12.0.5
• CDK/Material: 10.2.6 & 12.0.4
• Browser(s): Chrome Version 91.0.4472.114 (Official Build) (x86_64)
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

What is our use case

Here's what our current use case is and the reason we have not gone with a pagination with mat-table

• The table is expected to show a total of atleast 10000 rows in tabular format
• Most of these rows could be grouped (Expected maximum 50 groups having around 1000 rows in each group)
• Each group can be expanded / collapsed to reveal / conceal the rows belonging to that group
• Each of the row has a checkbox to select / unselect the specific row / group and it's child rows if any
• So essentially, if there are 10 data rows and 3 groups in total, that accounts to a total of 13 rows we are rendering in the mat-table considering all groups are expanded and it would be a total of 3 rows rendered when all the 3 groups are collapsed.

[crisbeto]

Duplicate of #13460. Also #21708 should help with this.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}