Too many list items cause lag

Question

I am using mat-expansion-panel from Angular Material in my app and I combine it with infinite scroll so that I won't load all of them at once and it won't lag because of it. However, once I scroll to the bottom and I have about 30-40 elements loaded, it lags when I open the expansion panel.

My first solution to this was to use a virtual-scroll.

https://ionicframework.com/docs/api/virtual-scroll#usage

But it doesn't support variable height items.

My next solution was to use infinite-scroll on both directions, but I have never seen other apps make use of this so I think there should be a better way.

https://ionicframework.com/docs/api/infinite-scroll#usage

Has anyone else encountered this problem and solved it in a better way?

try html `details` tag. https://www.w3schools.com/TAGS/tag_summary.asp — Najam Us Saqib, Oct 29 '19 at 08:38
There is some work of styling in this solution but I like it. It is very lightweight. — Sinan Samet, Oct 29 '19 at 09:04
you can hide marker like this: `summary::-webkit-details-marker { display: none }` and do styling as you want. — Najam Us Saqib, Oct 29 '19 at 09:08
Yes thanks I got that. I'm working on the styling now and I will make an animation for it. If you post it as an answer I will accept it. — Sinan Samet, Oct 29 '19 at 09:23

score 1 · Accepted Answer · answered Oct 29 '19 at 09:28

Your can use HTML Details Summary Tags:

Html:

<details>
  <summary>Your Heading</summary>
  <p> Your First Paragraph.</p>
  <p> Your Second Paragraph.</p>
</details>

CSS to hide default Marker: // you can style this as your want after this

summary::-webkit-details-marker { display: none }

Too many list items cause lag

1 Answers1