Angular: Improve performance for multiple re-rendering large list

Question

So i have that casual problem of rendering large lists with ngFor, but my application being extremely laggy and taking too long to finish rendering.

My actual case:

I have multiple lists of mat-cards, which all have dynamically different and unpredictable sizes. Just to give you an idea, one list contains around 100 to 300 cards, all with buttons, icons and texts.

So virtual scroll from material cdk is not working for me because of the dynamic sizes. It should be possible to always switch between these lists, which leads to re-rendering them all the time.

I am already caching the http request for the needed data, so my problem is really only the browser rendering, not retrieving of data.

I also tried dynamic rendering with ng-template strategy, but that also not improved that much. And since i can always switch between the lists, it leads to race conditions while switching them.

RxAngular also did not help for my specific case.

After researching a lot in the web, i am now desperately looking for my final hope. Is there maybe a way to cache the actual rendered html, so that i can just reuse them while switching between the lists? Or any other advice and suggestion would be highly appreciated.

Thanks in advance!

Edit: More infos about use case: It is about a poetic book with multiple chapters. Each chapter has multiple verses and all of them can be commented on, favorised, copied and shared etc. And my client wants the whole chapter to be rendered in one huge list and whenever the chapter is switched it should be re-rendered at the same place. So i hope this information helps about understanding the issue

Answer 1

If you want to display 300 mat-cards with content inside all on one page, its just natural and normal that you experience performance issues.

There is no way (usually) why rendering 300 such items on one page at a time is necessary, or can you tell us more about your use case?

Some other options:

1. Use the trackBy feature of the *ngFor Directive
2. Implement Pagination

Why isn't virtual scrolling not working for your case? If you have the data from the api call you know the size before rendering. Also, implement cdk virtual scroll for every list, not one virtual scroll where you swap the list itself.

Hope it was helpful!

Answer 2

300 cards must not be a problem, you can render even 10,000 cards, perhaps you are doing some recursively or may a loop o may can be something external issue.

So, my suggestion is make a pagination, dont save the 300 cards in memory, you must speak with your team lead and back end team that provide you a pagination, each request must deliver 10 cards. For that reason MONGO DB or other Data Bases was created, take adventage of that. Is the best aproach, some day your app will be complex.

In anothe hand, the human eye isnt capable to watch such size of info... Please put your self in the shoes of the final user =)