loadingSpinner is displayed when isInfiniteLoading={ false }

[paulpooch]

What is reasoning behind converting all the props passed in into internal state?

This is creating situations where state.isInfiniteLoading is true even though I passed in isInfiniteLoading={ false } as a prop - and so the loadingSpinner is visible when nothing is loading.

This would be fine is the below were fixed:

  var loadingSpinner = this.computedProps.infiniteLoadBeginEdgeOffset === undefined
      ? null
      : <div ref={(c) => { this.loadingSpinner = c; }}>
        {this.state.isInfiniteLoading ? this.computedProps.loadingSpinnerDelegate : null}
      </div>; // CAN WE USE this.props.isInfiniteLoading ABOVE INSTEAD?

Here is an image where the two fields are out of sync. Look at the watch panel.

[garetht]

The behavior of isInfiniteLoading was part of the original design which automatically turned on the infinite loading spinner instead of waiting for the user to pass the appropriate prop into Infinite to turn the spinner on. It would probably have been better and more intuitive to have made the user turn it on manually, but changing that part of the design will have to wait so it does not break current components.

[paulpooch]

OK thanks for the explanation.

I am able to workaround this via CSS hack (adding an isLoading classs to parent which makes spinner display: none).

But certainly let me know if you ever want a PR for this.

[NarasimhaReddyY]

I encountered the same problem today. It's better to let the user to pass isLoading prop instead of auto setting to true. Thanks

[torstenrudolf]

yes, I just ran into this myself, and this is certainly not what you want. it should only use the prop specified. it should only use the inner state, if the prop is undefined.

[kgregory]

See this comment from @dobryanskyy for an easy workaround:

I had very similar issue with spinner not getting hidden. I have dealt with that problem by setting loadingSpinnerDelegate={isLoadingInProgress && <Spinner />}