bug(mat-table): render data in table taking time for few rows(50) #26722
Description
Is this a regression?
- Yes, this behavior used to work in the previous version
The previous version in which this bug was not present was
v13
Description
I have a component that has a mat-table inside it, but I created a component because I have other logic to render things more dynamically.
however I always faced performance problems, but I never had time to stop and analyze, and there are not many lines, for example 50 lines I already notice.
When I say performance problem I mean the time for records and lines to appear, that is, render.
it takes around 6 to 10s, and the api returns the data in 300ms.
In my tests I ended up leaving only the table in fact, I removed the components that are rendered inside the lines of the table, because I thought it could be one of these components.
I put in place a fixed text whatever.
this in all places, as much as in my component's html, I have some if statements to render what is content, actions, etc.
however I removed everything and left fixed text in my tests to actually understand if it was these components called or the problem is already at the beginning.
Below I sent the stackblitz link, with the base code of the component, where I already find the slowness in rendering.
Reproduction
I tried to make a reproduction of the component, more to verify the logic of how I look for the data when I click on the next page, etc.
Follow the link: https://stackblitz.com/edit/angular-13-template-asul9a?file=src%2Fapp%2Fapp.module.ts,src%2Fapp%2Ftable%2Ftable.component.ts,src%2Fapp%2Ftable%2Ftable.component.html
Expected Behavior
rendering 50 lines in 1 seconds or less
Actual Behavior
rendering 50 lines in 6 seconds to 10 seconds
Environment
- Angular: 13.2.2 or less
- CDK/Material: 13.2.2 or less
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any