handleImagesLoaded triggers multiple times about react-masonry-component HOT 15 OPEN

@arpecop @indapublic
I don't think this is a bug in Masonry or React Masonry Component.

the layoutcomplete event fires every time Masonry completes a layout. Do you find your layout updates several times on screen? This can happen as images are downloaded.

If you want to capture 1 event every X seconds etc, you could try using Lodash's throttle or debounce functions.

http://masonry.desandro.com/events.html#layoutcomplete

from react-masonry-component.

Looks like possibly an issue with a recent change. Thanks for bringing it up. Will look at it tonight

from react-masonry-component.

@afram Same situation. Triggers 5 times on remote website and once on local machine

[email protected]
[email protected]

from react-masonry-component.

@indapublic will look into it.

from react-masonry-component.

Hi,

I think the issue might be with React Masonry Component in fact.

Each time performLayout is called, it calls this.masonry.layout(), which I believe will trigger the layout complete callback when it finishes.

performLayout is invoked each time componentDidUpdate runs.

performLayout seems to have checks to detect when the layout needs to be changed, however it calls this.masonry.layout() even when there are no layout changes.

As of right now, I have to be very careful about when my Masonry component renders because each time that happens another layout complete fires.

from react-masonry-component.

I have been facing the same issue. All I wanted to do was show a loading gif till my grid loaded, but onImagesLoaded / onLayoutComplete gets called repeatedly. Here's my code:

export class TeamGrid extends React.Component<ITeamGridProps, ITeamGridState> {
  constructor(props) {
    super(props);
    this.state = {
      imagesLoaded: false
    }
  }

  public handleImagesLoaded = () => {
    this.setState({ imagesLoaded: true });
  }

  public render() {
    const childElements = this.props.members.map(function (element, index) {
       // returns some div
    });
    const loadingGif = (<h1>Loading</h1>);
    return (
      <Masonry
        className={'tip-masonry-grid'} // default ''
        options={masonryOptions} // default {}
        onImagesLoaded={this.handleImagesLoaded}
      >
        {this.state.imagesLoaded ? childElements : loadingGif}
      </Masonry>
    );
  }
};

from react-masonry-component.

@afram Is there any update for this?

from react-masonry-component.

I believe there are situations when a components render method gets fired multiple times due to state or props change and that is when masonry/imagesloaded gets fired repeatedly somehow. Not sure if it is a "bug" really or if it's up to the developer to filter out unneeded re-renderings.

from react-masonry-component.

I wouldn't want the component to presume how you want to use it. I'd say the recommended approach is to throttle/debounce yourself as you know your use case best.

from react-masonry-component.

@alberto2000 @an5rag @jgraniero

Can you please try the latest version and let me know if it solves the problem for you?

from react-masonry-component.

@afram I actually just had to revisit my code that used the masonry component. I updated to the latest version and removed a lot of the logic I had around controlling calls to masonry.layout(). the new code I have is much simpler and doesn't exhibit any of the issues I mentioned previously, so as far as I can tell (without really digging into the issues I previously experienced) it seems better.

from react-masonry-component.

I've got this issue as well. onImagesLoaded={this.handleImagesLoaded} fires twice if you setState within handleImagesLoaded. For instance

handleImagesLoaded(imagesLoadedInstance) {
    this.setState({ loading: false });
}

from react-masonry-component.

I got the same issue and I have fixed with following library and tweaking some css code.

https://github.com/oyvindhermansen/react-images-loaded

<ImagesLoaded
elementType={"div"} // defaults to 'div'
className={"your-container-class"} // defaults to 'images-loaded-container'
style={{ display: this.state.imagesLoaded ? "block" : "none" }}
onAlways={this.handleOnAlways}
onProgress={this.handleOnProgress}
onFail={this.handleOnFail}
done={this.handleDone}
>
{photos.map((item, index) => {
return (
<Photo
key={index}
photo={item}
onToggleAddBtn={() => this.toggleAddBtn(item.key)}
/>
);
})}

from react-masonry-component.

No updates on this one, fires 2 times, 1 in middle of positioning images, 2 when completed

from react-masonry-component.

Here is the illustration of the problem

from react-masonry-component.