Immediate enter

[peterbe]

I use this component something like this:

class App extends React.Component {
  state = {loading: true}
  componentDidMount() {
    window.setTimeout(() => { this.setState({loading: false}, 3000);
  }
  render() {
    <Loadable
            active={this.state.loading}
            spinner
            background="rgba(256, 256, 256, 0.92)"
            color="#000"
            spinnerSize="140px"
            text="Loading the app..."
          >
      <Rest>
        <OfThe>
          <AppStuff/>
        </OfThe>
      </Rest>
    </Loadable>

  }
}

The only problem is that at the very very beginning you can see black text on white background for a couple hundred milliseconds, then it all fades out to white and the spinner appears. After about the page is loaded (see the 3,000ms timeout in componentDidMount the white overlay fades out and all is well.

What I would ideally like is for it to start immediately with the overlay on.

I think this could be achieved by not having a 500ms transitionEnterTimeout but I'm only speculating.

It's hard to take a screenshot at that first render, but here's what it looks like after about 1-2 seconds after loading the page:

[derrickpelletier]

Thanks, going to look into this. Just updated to v1.0.0 and changed the timeout functionality a bit but i'll verify whether this is still happening. Thanks!