CODEWITHSUNDEEP
reactjsreact-router
davidlee
davidlee

Reputation: 6167

How can I get a route to have delay rendering?

How can I get the route to delay rendering? After <Link> is clicked, it will only be rendered after 2 seconds instead of instantly as in react-router-dom.

Upvotes: 0

Views: 976

Answers (2)

ChrisR
ChrisR

Reputation: 4008

To strictly answer your question: How can i get the route to delay rendering?

-> I would use a setTimeout function inside the render property of the Route.

Then, to answer your additional conditions stated in comments (that only path accessed from Links should be delayed):

-> I would follow @Stretch0 advice to use a parameter. This parameter should then be tested in the render function of the Route.

Upvotes: 0

Stretch0
Stretch0

Reputation: 9251

You could run a set timeout in your componentDidMount to set render state. When render is false you return null in your render function, if it's true, you render your content

class TestComp extends Component {

    constructor(){
        super()
        this.state = {
            render: false
        }
    }

    componentDidMount(){
        setTimeout(() => {
            this.setSTate({render: true})
        }, 2000)
    }



  render() {

    if(!this.state.render) return null

    return (
      <div>
        Page content
      </div>
    );
  }
}

As for your question about only delaying the render on the first load, you could try adding a query string to tell the component if it needs to delay or not:

class TestComp extends Component {

  constructor(props){
    super(props)
    this.state = {
        render: this.props.location.delayLoad ? false : true
    }
  }

  componentDidMount(){

    if(!this.state.render){
      setTimeout(() => {
          this.setState({render: true}, () => {

            // in the callback, update your query string
            history.push({
              pathname: '/route',
              search: '?delayLoad=false'
            })

          })
      }, 2000)
    }

  }



  render() {

    if(!this.state.render) return null

    return (
      <div>
        Page content
      </div>
    );
  }
}

Upvotes: 1

Related Questions