react-placeholder icon indicating copy to clipboard operation
react-placeholder copied to clipboard

Don't set state to not-ready if the ready prop is true

Open michaelmulley opened this issue 5 years ago • 0 comments

I've encountered a bug with the delay prop which would result in the placeholder showing indefinitely, with {ready: true} in props but {ready: false} in state.

I believe the events which lead to this are, when delay is set to n milliseconds, all of the following happen before n milliseconds is up:

  1. ready prop is set to false, a timeout to set ready state is set and the ID stored in this.timeout
  2. Some detail in props.children is changed, cause componentWillReceiveProps to be called again; this causes another timeout to set ready state to be created, and the ID stored in this.timeout is overwritten
  3. ready prop is set to true, which sets state to {ready: true} and which also deletes the timeout set in step 2 (but, crucially, not the timeout set in step 1)
  4. The timeout set in step 1 fires, setting state incorrectly back to {ready: false}

The pull request is one approach among many to fix this. You could also clear any existing timeout in this.timeout before setting a new one, or change the render method to

return (this.props.ready || this.state.ready) ? this.props.children : this.getFiller();

Thanks!

michaelmulley avatar Mar 21 '19 19:03 michaelmulley