Infinite Scroll Support

[aogaili]

@ZitRos this library is working beautifully with Meteor real-time fetch, so I've decided to investigate it further.

However I'm only getting stuck at the infinite scroll feature. I've been trying to use it with react-infinite-scroller but I'm getting stuck in a loop, load more keeps getting called until everything is loaded.

I'm guessing it has something to do with the sequence of things being loaded, one card get loaded by xmasonry and react-infinite-scroll makes another call to the load more function. Perhaps if there is way for XMasonry to inform react-infinite-scroll that things still loading so it prevents further calls to load more data, but I'm just guessing here.

So I'm wondering if you've attempted integrating infinite scroll with your library ?

[aogaili]

I got it working with react-infinite-scroller, I was mistakenly re-rendering everything when the subscription limit increments.

It's working perfectly with Meteor real-time subscriptions and react-infinite-scroller.

[nikitaeverywhere]

Thanks @aliogaili! Good to hear that everything works fine here.

[Tommy10802]

@aliogaili hi, i want to ask you if it is possible to share code of your solution react-xmasonry with react-infinite-scroller, because i am trying implement same thing but i have a lot of problems :(. I will be very grateful for any help

[aogaili]

@Tommy10802 what kind of problems are you having? here is a starting point:

I'm using react-infinite-scroller

import InfiniteScroll from 'react-infinite-scroller'; Within the react component, I wrap the xmasonry within the infinite-scroller component:

  <InfiniteScroll
              pageStart={0}
              loadMore={this.getMore}
              hasMore={this.state.hasMore}
              threshold={600}
              useWindow={true}
              loader={
                <div style={loadingStyle}>
                  {!subscriptionsLoading && (
                    <span className="fa fa-refresh fa-spin" />
                  )}
                </div>
              }>
        <XMasonry>{pins}</XMasonry>
 </InfiniteScroll>

and the pins are just xblock components:

   <XBlock key={`block-${post._id}`}>
            <div
              className="block pin-post"
              style={{
                borderRadius: '3px'
              }}>
              <Post
                key={post._id}
                className="pin-card"
                post={post}
                style={{ minHeight: '225px' }}
              />
            </div>
          </XBlock>

I'm not sure what kind of errors are you getting, let me know.

[Tommy10802]

@aliogaili Thx for your quick reply, its already works for me. Thanks again for your help :)