search

DerYeger / yeger

Monorepo for @yeger/ NPM packages
MIT License
316 stars 24 forks source link

Masonry adding items limitation (Slow speed) #106

Closed OndrejIT closed 1 year ago

OndrejIT commented 1 year ago

Affected Packages

Description

Hi, I started using this plugin but I have a problem with the speed of masonry rendering with load more pagination. If there are too many elements on the page and I create a new array each time (instead of push to the existing array) the rendering starts to slow down. Would it be possible to add push to array support to the plugin ? I think this would solve the problem with the speed of rendering a lot of elements.

Additional context

No response

Preferences

DerYeger commented 1 year ago

Thank you for the report.

I don't think the creation of a new array is actually causing performance issues in this case. Every change to the input array would still require all elements to be redrawn (as it's done as of now), because we can't assume a simple push. Arbitrary actions, e.g., element removal, would require a complex diffing algorithm as that used by Android's RecyclerView. This library is intentionally kept simple.

Without a virtual list, an infinite scroller will eventually be slow anyway. Did you consider defining a hard limit for the input length? E.g.:

items.value = [...items.value, newItem].slice(items.value.length - 99)

Would limit the length to 99.

PS: After reconsideration, that approach probably won't work either, because the column distribution will shift.

OndrejIT commented 1 year ago

Yes I have tried deleting the last X records, unfortunately this is not the solution. The site scrolling then jumps and the page behaves strangely.

What is the implementation in a similar library https://nuxt-app.vercel.app/vue-masonry-wall-image ? According to their demo it seems that the rendering works fast even with a large array.

According to https://github.com/fuxingloh/vue-masonry-wall#usage this library works for pushing a new array.

DerYeger commented 1 year ago

I'm aware of fuxingloh/vue-masonry-wall, this library started as a fork of it.

I couldn't get array pushes to trigger Vue's reactivity and am not sure what's causing it. Please let me know if you know any fix.