Server rendered views 'flash'

[KieranGreenwood]

If react is rendered on the server, the page is displayed, then flashes as the initial style is set to 0 opacity, then animated back in.

Is there any way to negate this?

[misterfresh]

You could check in your code if the window object is present, and if it is not, disable the transition effect. To do that, you can just edit the javascript object that holds the transition styles, which is one more advantage of not dealing with a css rule.

[KieranGreenwood]

I did try something similar but as soon as react is picked up on the client, window/document become available so the styles are re-animated from static.

Example:

var initialStyle = typeof window !== 'undefined' ? {opacity: 0} : {opacity: 1};
...
<EasyTransition
    path={path.path + 'path'}
    initialStyle={initialStyle}
     transition="opacity 0.3s ease-in"
    finalStyle={{opacity: 1}}
>
{this.props.children}
</EasyTransition>

I've also tried disabling it for the first initial load/refresh like so, but this stops routing working all together with no errors.

constructor() {
    super();
    this.state = { initialStyle: { opacity: 1 } }
}

componentDidMount() {
    this.setState({initialStyle: {opacity: 0}})
}

//render....
<EasyTransition
    path={path.path + 'path'}
    initialStyle={this.state.initialStyle}
     transition="opacity 0.3s ease-in"
    finalStyle={{opacity: 1}}
>
{this.props.children}
</EasyTransition>

[misterfresh]

How about something like that :
//in render method

{(typeof window !== 'undefined' &&
                window.document && window.document.createElement) ?
                <EasyTransition
                    path={path}
                    initialStyle={initialStyle}
                    transition="opacity 0.3s ease-in"
                    finalStyle={finalStyle}
                >
                    {this.props.children}
                </EasyTransition> :
                    this.props.children
                }

[KieranGreenwood]

This gives the same behaviour as above because.as soon as its loaded client side, the expression evaluates to true so <EasyTransition> overwrites the server rendered this.props.children and animates them back in.

What I need is a way for the client to not run it on initial load, which is what i've attempted by setting the initialStyle to the same as the finalStyle to give the illusion of no animation, then update the state of initialStyle to opacity: 0 on mount so that the following route changes animate based on the intented initialStyle.

If that makes sense.

[misterfresh]

Thanks for reporting the problem, I'll look into it and let you know if I find a solution.

[misterfresh]

@Kiee fixed it in the latest release.