0

I use react + redux, I make a request to the server and while waiting for a response from the server the component is not displayed, the value of isFetching = false. As soon as the answer is received, the value isFetching = ture

 if (this.props.tv.isFetching) {
    return (<div>hello world</div>)
} else {
    return <Spinner/>;
}

At the moment when we are waiting for a response from the server, I would like to display a spinner with fade in display and fade out.

I came to the output using react-transition-group. But the problem is that the enter and exit events do not work, only appear.

class Spinner extends Component {
    render() {
        return (
            <CSSTransition
                classNames={{
                    appear: 'my-appear',
                    appearActive: 'my-active-appear',
                    enter: 'my-enter',
                    enterActive: 'my-active-enter',
                    exit: 'my-exit',
                    exitActive: 'my-active-exit',
                }}
                timeout={{
                    enter: 300,
                    exit: 50550,
                }}
                in
                appear
            >
                <div className="spinner-wrap" >
                    <div className="spinner"/>
                </div>
            </CSSTransition>
        );
    }
}
Drop
  • 1,394
  • 3
  • 15
  • 25
  • The `CSSTransition` component must remain in the DOM in order for it to be able to do those transitions. Transition groups can only transition their children, but you are removing the entire transition group from the DOM. You can put the `
    hello world
    ` inside the `CSSTransition` children.     – Ross Allen Dec 01 '17 at 13:39
  • it work for simple example like button and state, but how i make to do this in my code? add another property after i take data from server and add to `props in` , then set timout to isFetching property? – Drop Dec 01 '17 at 14:12

0 Answers0