feat: On mobile devices, the change of ssrColumns takes more than 5 seconds

[xiaoxuwei12345]

Affected Packages

• [ ] @yeger/eslint-config
• [ ] @yeger/vue-masonry-wall
• [ ] @yeger/vue2-masonry-wall
• [ ] vecti

Description

On mobile devices, when in portrait mode, my ssrColumns is set to 2, and when in landscape mode, my ssrColumns is set to 3. Now my number of items is 90, and I found that when switching from portrait mode to landscape mode, the change of ssrColumns takes more than 5 seconds, which will cause the phone to freeze and become unresponsive. How can I solve this problem? Thank you!

Additional context

No response

Preferences

• [ ] I want to be assigned to and work on this issue myself

[DerYeger]

Using ssrColumns for this is probably wrong, as they are only for the initial render. If re-layouts are so slow, the issue is probably with the components you are using for your items.

[xiaoxuwei12345]

https://github.com/DerYeger/yeger/issues/324 This use case is not supported due to the layout being created via JavaScript. However, you can use a ResizeObserver to dynamically change maxColumns.

Thank you very much for your reply! But in the answer to the previous question(#324), you said that maxColumns can be modified dynamically (this should mean that in addition to initial rendering, maxColumns can also be modified dynamically when the browser is rendering). When I switched my phone from portrait to landscape mode, I also dynamically modified maxColumns as you said.

There should be no problem with my items, just some simple pictures and text. When I reduced the number of items from 90 to 12, the re-layouts speed became very fast. Does it mean that the solution is to use fewer items? Looking forward to your reply, thank you very much!

[DerYeger]

That is correct, maxColumns can be changed dynamically. Have a look at the demo, add a few items (by clicking "Random (10)", then change minColumns/maxColumns. The layout will change without any issues.