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

Question

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?

Titus · Accepted Answer · 2019-07-18T19:45:07.243

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

score 0 · Answer 2 · answered Jul 18 '19 at 19:40

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>

        )
    }
}

i took an example here: https://stackoverflow.com/questions/34424845/adding-script-tag-to-react-jsx, hope, it helps you — Max, Jul 18 '19 at 19:41
it did not solve the problem unfortunately, cause, there is yet a way to listen to the script.. — Kristoffer Tølbøll, Jul 18 '19 at 19:45
Dynamically created script elements are loaded async by default ([documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Attributes)) and that doesn't mean that the code execution pauses until the script is loaded. — Titus, Jul 18 '19 at 19:49

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

2 Answers2