CODEWITHSUNDEEP
relayjs
bjlevine
bjlevine

Reputation: 984

Relay Modern: How to display a loading indicator on loadMore in a PaginationContainer

I'm trying to figure out how to display a loading indicator in a Relay Modern application when paging in data. I have a component based on a PaginationContainer and I want to display a loading indicator when paging in additional data (loadMore() is called). I don't see any way to do this other than somehow providing a custom Network implementation that does this during any network request which is not exactly what I want. Thoughts?

Upvotes: 2

Views: 626

Answers (2)

bjlevine
bjlevine

Reputation: 984

It seems to me that this is a common use case that should be explicitly supported in the Relay API, but the following is the best I could come up with. Suggestions for other solutions are encouraged.

In my component which is based on a Pagination container:

constructor(arg) {
  super(arg);
  this.state = {isLoadingMore: false}
}

componentWillReceiveProps(nextProps) {
  if (this.props !== nextProps) {
    this.setState({isLoadingMore:false});
  }
}

// onClick handler for "More" button
handleMore() {
  if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
    return;
  }

  this.setState({isLoadingMore: true});
  this.props.relay.loadMore(
    ...
  )
}

render() {
 ...
 const isLoadingMore = this.state.isLoadingMore;    
 return (isLoadingMore ? <LoadingIndicator /> : <ListOfStuffView />

}

Upvotes: 1

Vincent Taing
Vincent Taing

Reputation: 3334

I think Relay comes with an API to let you know if request are pending, you can have access to this.props.relay.isLoading() (see docs)

class MyComponent extends React.Component {
  render () {
    return {
      <div>
        {this.props.relay.isLoading() ? <Spinner /> : null>
        // ....
      </div>
    }
  }
}

export default createPaginationContainer(
  MyComponent, 
  ...
)

Upvotes: 0

Related Questions