Comments (2)
Very interesting, are you using a shadow-DOM like technique with opacity: 0 to calculate everything? I am very curious into this, thanks.
from react-window.
EDIT: The major clutter is gone (before I had messages flying around and incorrect persistent heights for some reason), now there is a tiny bit of clutter for a few milliseconds, I don't know if my approach is the most ideal to begin with. Looking forward to your solution.
The clutter is mostly gone doing what I mentioned above:
Just above my list component:
{!heightsCalculated && (
<ShadowHeightCalculator messages={localMessages} />
)}
In my ListItem
component I am running the setRowHeight
function in a useEffect
, ShadowHeightCalculator
component looks like:
function ShadowHeightCalculator({
messages,
}: {
messages: Array<MyDataType>;
}) {
return (
<div style={{ position: "relative", opacity: 0, height: "1px" }}>
{messages.map((message, idx) => (
<ListItem
key={`shadow-height-${idx}`}
index={idx}
style={{
position: "absolute",
left: 0,
top: 0,
}}
/>
))}
</div>
);
}
And I am running a loop somewhere (a useInterval
hook) checking it like so:
const checkHeightsCalculated = (messages: Array<MyDataType>) => {
const heightsCalculated = messages.some(
(msg) =>
rowHeights?.current &&
typeof rowHeights.current[msg.hash ?? ""] !== "number"
);
return !heightsCalculated;
};
from react-window.
Related Issues (20)
- Why is the onscroll method triggered when the page is first rendered HOT 1
- Styling are not added properly in Table body
- Add "behavior" option for scroll methods
- VariableSizeGrid has issue when row count over 1000
- Section Header HOT 1
- Deteriorated performance on lists exceeding 1000 elements
- Can't use react-window in vite react-ts HOT 1
- innerElementType doesn't work HOT 1
- Input is losing focus , when wrapped with VariableSizeList HOT 2
- when i use "WindowScroller", why the page is constantly refreshing?
- Shifting all items in a list
- Loading indicator while it loads all 1m rows HOT 1
- onClick inside <List /> element doesn't work HOT 2
- Blanks appear on fast scrolling in react 18 use createRoot HOT 2
- add new item error when use VariableSizeList HOT 1
- Allow canceling scroll HOT 1
- InfiniteLoader not working when api data fetch limit is equal to columnCount in FixedSizeGrid. HOT 1
- Should `isItemLoaded` return `true` for in-progress items?
- Scroll to top gives Invalid onItemsRendered signature HOT 1
- Row size is fixed HOT 1
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 react-window.