import { Component, type JSX, type ReactNode } from 'react' type ScriptLoadedState = { scriptLoaded: boolean } type ScriptLoadedProps = { // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type children: ReactNode | ReactNode[] | Function } function SpanIntro(): JSX.Element { return ( Enter API Key to see examples ) } class ScriptLoaded extends Component { interval: number | undefined constructor(props: ScriptLoadedProps) { super(props) this.state = { scriptLoaded: !!window.google, } this.interval = window.setInterval(this.checkIfScriptLoaded, 200) } setScriptLoadedCallback = (): void => { if (this.state.scriptLoaded) { window.clearInterval(this.interval) } } checkIfScriptLoaded = (): void => { if (window.google) { this.setState(function serScriptLoaded() { return { scriptLoaded: true, } }, this.setScriptLoadedCallback) } } override componentWillUnmount(): void { window.clearInterval(this.interval) } override render(): JSX.Element { if (!this.state.scriptLoaded) { return } return this.props.children instanceof Function ? this.props.children() : this.props.children } } export default ScriptLoaded