For very long posts it may take a VERY long time to show up and render.
Trying to solve that by reducing number of elements rendered on page load and render then only when parent thread comes into view. unfortunately IntersectionObserver is not performant enough to watch every comment individually so I'm grouping top level threads into groups of 10 and watching its visibility - once any part of the thread group will become visible - whole thread group will render completely.
Some data (10 samples for each group) for post with 3600 comments:
Further optimizations: lazy-load images only when thread comes into view
Render less elements - I tried rendering only comment content by default (so user can search the page) but UX is a bit chunky - if you scroll the page using page scroll you will see flash when component rerenders - doesn't feel good - may need extra effort
For very long posts it may take a VERY long time to show up and render. Trying to solve that by reducing number of elements rendered on page load and render then only when parent thread comes into view. unfortunately
IntersectionObserver
is not performant enough to watch every comment individually so I'm grouping top level threads into groups of 10 and watching its visibility - once any part of the thread group will become visible - whole thread group will render completely. Some data (10 samples for each group) for post with 3600 comments: Further optimizations: lazy-load images only when thread comes into view Render less elements - I tried rendering only comment content by default (so user can search the page) but UX is a bit chunky - if you scroll the page using page scroll you will see flash when component rerenders - doesn't feel good - may need extra effort