CODEWITHSUNDEEP
reactjsiframe
user11553898
user11553898

Reputation:

How to delay a component render in React?

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!

Upvotes: 1

Views: 5622

Answers (2)

Shubhanu Sharma
Shubhanu Sharma

Reputation: 2132

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;

Upvotes: 1

ravibagul91
ravibagul91

Reputation: 20755

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>
    );
  }
}

Upvotes: 2

Related Questions