Giter VIP home page Giter VIP logo

Comments (2)

niemal avatar niemal commented on August 16, 2024

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.

niemal avatar niemal commented on August 16, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.