How to delay a component render in React?

Question

I have an instagram widget thas uses iframe, but when I switch between routes, the widget loads too slow and does'nt have time to render properly. Can You tell me, how to set delay rendering of the component, jr another solution to this problem?

Here is the component:

import React, { Component } from 'react';
const divStyle = [
  {
    border: 'none',
    overflow: 'hidden',
    width: '100%'
  },
  {
    font: "10px/14px 'Roboto','Helvetica Neue',Arial,Helvetica,sans-serif",
    fontWeight: '400',
    width: '100%',
    textAlign: 'right'
  },
  {
    color: '#777',
    textDecoration: 'none'
  }
];

class Instagram extends Component {
  render() {
    return (
      <div id="instagram">
        <iframe src="https://snapwidget.com/embed/711808" className="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style={divStyle[0]}></iframe>
      </div>
    );
  }
}

export default Instagram;

Also the code is located in the CodeSandbox.

Thanks for any help!

You can detect page load mean while you can show a loader https://stackoverflow.com/questions/3142837/capture-iframe-load-complete-event — Shubhanu Sharma, Jul 20 '19 at 10:55

score 2 · Answer 1 · answered Jul 20 '19 at 10:56

You can make use of state to render,

class Instagram extends Component {
  state={
     show: false
  }
  componentDidMount(){
     setTimeout(()=>{
        this.setState({show: true})
     },5000) //runs after 5sec
  }
  render() {
    return (
      <div id="instagram">
        { this.state.show && <iframe src="https://snapwidget.com/embed/711808" className="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style={divStyle[0]}></iframe> }
      </div>
    );
  }
}

This is just a hack not a proper solution. What in case of internet connection is too slow ? — Shubhanu Sharma, Jul 20 '19 at 11:09

score 2 · Accepted Answer · answered Jul 20 '19 at 11:07

This can be possible solution from your code sandbox.

NOTE: Please Replace your loader with loading div.

CodeSandbox: https://codesandbox.io/s/damp-platform-950yw

import React, { Component } from "react";

const divStyle = [
  {
    border: "none",
    overflow: "hidden",
    width: "100%"
  },
  {
    font: "10px/14px 'Roboto','Helvetica Neue',Arial,Helvetica,sans-serif",
    fontWeight: "400",
    width: "100%",
    textAlign: "right"
  },
  {
    color: "#777",
    textDecoration: "none"
  }
];

class Instagram extends Component {
  state = {
    loading: true
  }
  handelOnLoad = () => {
    this.setState({
      loading: false
    })
  }
  render() {
    return (
      <>
        {this.state.loading && <div style={{
          position: "fixed",
          background: "rgba(0,0,0,0.7)",
          top: 0,
          bottom: 0,
          right: 0,
          left: 0,
          color: "#fff"
        }}>Loading</div>}
        <div id="instagram">
          <iframe
            src="https://snapwidget.com/embed/711808"
            className="snapwidget-widget"
            allowtransparency="true"
            frameborder="0"
            scrolling="no"
            style={divStyle[0]}
            onLoad={this.handelOnLoad}
          />
        </div>
      </>
    );
  }
}

export default Instagram;

How to delay a component render in React?

2 Answers2