CSS styles are applied only after element is revealed

I transition an image into a headline.
```

class App extends Component {
constructor() {
super();
this.state = {
loading: true
};
}
componentDidMount() {
setTimeout(() => {
this.setState({loading: false});
}, 2000);
}
render() {
return (

{this.state.loading && }
{!this.state.loading &&

React-Overdrive Test

}

```
The basis is the default create-react-app setup: https://github.com/joetm/overdrive-test

What I notice is that the style of the headline is not applied immediately.
I see the headline appear with black text left-aligned. Then it jumps to being center-aligned with white text.

Anything that can be done in this case?

Start with the App component in the default create-react-app setup and trace the componentDidMount state change, render branches, and the two Overdrive elements. Reproduce the transition from the linked test repository, then inspect when the headline's CSS is applied. Done means the headline does not briefly appear left-aligned with black text before its intended styles take effect.

Written by the indexing model from the issue text.