InfiniteGrid 4 Release !!
We’ve released the major version 4 of NAVER’s open source layout library InfiniteGrid.
InfiniteGrid is a module used to arrange items infinitely according to the type of grid. This module allows you to implement different grids of different card elements of different sizes. It also ensures performance by keeping only the DOM of the visible area.
The keywords emphasized in this major update are Virtual and Auto. It was developed with the goal of solving invisible areas with Virtual, or with Auto to solve conditional actions that are difficult for users to use.
Here are the major changes in InfiniteGrid v4:
Processing of invisible areas
InfiniteGrid maintains only the DOM of the visible area and removes the DOM of the invisible area to render items indefinitely while guaranteeing performance. The size of the items in the visible area can be calculated, but the size of the items in the invisible area is unknown, so only the visible area was rearranged. But if I only reposition the visible area, the scroll position is not correct, and in case of MasonryInfiniteGrid , the top gets jagged when reaching the invisible area.
So, to solve this problem, in v4, we chose to rearrange everything even if the size is unknown. Since this method maintains a virtual area, scrolling is also possible. This is most effective if the size of the item does not change.
Support for new loading method placeholder
In the existing loading method, it could be placed at the bottom through Spin, Progress, and Dots. If the grid can be placed in advance through a virtual item before the item is added, the scroll area can be maintained and it can be expressed that loading is being done more effectively.
Also, if you combine the status recovery method and placeholder, which will be introduced later, you can effectively express loading in an invisible area.
Supports status restoration that shows the same as before
When you go to the next page and come back, you want to see it the way it was before you moved on. To do this, we use a method to save and restore status using cookie, storage, persist, etc. In addition, a method is provided to save all status or only the displayed area because it is burdensome because the capacity is large when there are many items.
However, since this method does not have information about the invisible area, the scroll information and grid placement may become strange. So, in v4, items in the invisible area can get status with minimal information.
Also, the invisible area can be replaced with placeholders until the data is recovered, keeping the scroll area and placing the grid.
Supports dynamic properties.
InfiniteGrid has various properties that change the design. In the past, properties could only be set at initialization and could not be changed after that, so it could not respond to responsive design. By supporting dynamic properties in v4, it can respond to various environments.
InfiniteGrid supports React, Vue 2, Vue 3, Angular, and Svelte frameworks and prepares how to use them.
InfiniteGrid v4 has been improved to make it even more user-friendly based on user feedback and issues. In the future, we plan to further improve the parts that can be solved with Virtual and Auto. Also, an e2e test is planned, where individual tests are tested across all frameworks to make the library more stable.
If you suggest any inconvenience or necessary functions during use, it will be very helpful to develop the library, so I would appreciate it if you could write an issue.
Your ⭐️ has a lot of strength for us. 🙏
