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