CODEWITHSUNDEEP
javascriptreactjs
Kristoffer Tølbøll
Kristoffer Tølbøll

Reputation: 3337

Awaiting request, from non react source, inside a react component

I have used the calendly API inside my react component

I have tried with this code:

import React, { Component } from 'react'
import FullScreenModal from '../../../UIComponents/FullScreenModal'

export default class MeetingBooking extends Component {


    state={
        isLoading: false
    }
componentDidMount() {
    console.log(this.state.isLoading)
    const head = document.querySelector('head');
    const script = document.createElement('script');
    script.setAttribute('src',  'https://assets.calendly.com/assets/external/widget.js');
    head.appendChild(script);
    this.setState({loading: false})
}


    render() {
        console.log(this.state.isLoading)
        return (
            <FullScreenModal open={this.props.open} title={"Book a Meeting"} handleClose={this.props.handleClose}>
            {this.state.isLoading ?
            <p>Loading...!!!!</p> : 
            <div
             className="calendly-inline-widget" 
             data-url="https://calendly.com/kristofferlocktolboll"
             style={{minWidth: '320px', height: '580px'}}>
             </div> 
            }
             </FullScreenModal>

        )
    }
}

the issue is that I can't await the request from the URL the same way I could with an Axios or fetch API request, so whenever the script is inserted, the loading component is not even shown.

So I'm looking for some way to listen to the injected javascript, and await it, so I can show my <p>Loading....!!!!</p> in the meantime, can this be achieved?

Upvotes: 0

Views: 81

Answers (2)

Titus
Titus

Reputation: 22474

You can add a load event listener to the <script> element, here is an example:

export default class MeetingBooking extends Component {

  state = {
    isLoading: false
  }

  componentDidMount() {
    this.setState({ isLoading: true }, () => {
      const script = document.createElement('script');
      script.type = 'text/javascript';

      script.onload = () => this.setState({ isLoading: false });

      script.src = 'https://assets.calendly.com/assets/external/widget.js';
      document.head.appendChild(script);
    });
  }
}

Upvotes: 2

Max
Max

Reputation: 799

import React, { Component } from 'react'
import FullScreenModal from '../../../UIComponents/FullScreenModal'

export default class MeetingBooking extends Component {


    state={
        isLoading: true
    }
async componentDidMount() {
   if (this.state.isLoading) {
    const head = document.querySelector('head');
    const script = document.createElement("script");
    script.src = 'https://assets.calendly.com/assets/external/widget.js';
    script.async = true;
    head.appendChild(script);
    await this.setState({loading: false})
  }
}


    render() {
        console.log(this.state.isLoading)
        return (
            <FullScreenModal open={this.props.open} title={"Book a Meeting"} handleClose={this.props.handleClose}>
            {this.state.isLoading ?
            <p>Loading...!!!!</p> : 
            <div
             className="calendly-inline-widget" 
             data-url="https://calendly.com/kristofferlocktolboll"
             style={{minWidth: '320px', height: '580px'}}>
             </div> 
            }
             </FullScreenModal>

        )
    }
}

Upvotes: 0

Related Questions