Comments (4)
This lib hide items until items are measured because they can cause visual glitch on initial measuring with current implementation of WVList. And it's impossible to know actual sizes of items in server without layouting on browser (we can know if they are fixed sized items).
So could you tell me the problem in detail caused by hidden items? We may need escape hatch for it.
🤔 So for my use case, I am displaying an infinitely scrollable post feed for a social network-like website. I would like the initial list of items pre-rendered via. SSR to improve my site's SEO, and to avoid content layout shift.
Virtual list libraries such as virtuoso seem to handle pre-rendering the list of items just fine, so sizing somehow does happen on server-side (perhaps the initialItemCount
number of items in the list are SSR'd and made visible first, and then sizing happens after? Or is this how the library works, or will this cause the visual glitches you mentioned?).
from virtua.
This lib hide items until items are measured because they can cause visual glitch on initial measuring with current implementation of WVList. And it's impossible to know actual sizes of items in server without layouting on browser (we can know if they are fixed sized items).
So could you tell me the problem in detail caused by hidden items? We may need escape hatch for it.
from virtua.
react-virtuso will work without hidden style because it has different strategy from virtua.
As described in this gist, there are 2 major types of strategy of virtual scroller. react-virtuoso seems to be using relative positioning, on the other hand virtua, react-virtualized and react-window using absolute positioning. In absolute positioning every items should have correct top before initial display but not in relative positioning because we can just set position 0 to the spacer if scrolling starts from page top.
// absolute
<div style={{ position: 'relative' }}>
<div style={{ position: 'absolute', top: 0 }}>0</div>
<div style={{ position: 'absolute', top: 120 }}>1</div>
<div style={{ position: 'absolute', top: 240 }}>2</div>
...
</div>
// relative
<div>
<div style={{ paddingTop:0, paddingBottom: xxxx }}>
<div>0</div>
<div>1</div>
<div>2</div>
...
</div>
</div>
I need some investigation but I'm now thinking is to change strategy of WVList to relative from absolute. Why I adopted absolute strategy is that it was necessary for calculation in scrollToIndex of VList, but WVList doesn't have the method.
from virtua.
As a workaround for fixed sized items, you can override default style of items with components.Item
prop and provide initial item size in SSR with initialItemSize
prop:
const OverridedItem= forwardRef<HTMLDivElement, CustomItemComponentProps>(
({ children, style }, ref) => {
return (
<div ref={ref} style={{ ...style, visibility: 'visible' }}>
{children}
</div>
);
}
);
<VList components={{ Item: OverridedItem }} initialItemCount={10} initialItemSize={100} >{elements}</VList>
I think it will only work for fixed sized items and dynamic sized items may cause layout shifts.
from virtua.
Related Issues (20)
- Implement WindowScroller
- Prerender items longer for scroll direction
- Rearchitect for optimization at browser-level
- Consider using content-visibility
- Consider implementing lazy load component
- Consider supporting virtualization with CSS Grid HOT 2
- Add e2e for WVList
- Consider supporting React Native HOT 5
- Improve performance of VGrid HOT 1
- Detect `direction: rtl` style automatically
- Pluggable architecture HOT 1
- How to add private scrollbar in list? HOT 4
- Loading more items in mode: reverse HOT 9
- Support loading spinner at index 0 while reverse infinite scrolling
- Simplify store selectors
- Sticky position with horizontal true HOT 2
- Add a demo example of react-beautiful-dnd. HOT 2
- Add e2e for VGrid
- Add more props and methods to VGrid
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from virtua.