import { CircularProgress, Grid, Typography } from "@mui/material"; import React, { useEffect } from "react"; interface CustomIframeProps { url: string; style?: React.CSSProperties; showLoadingIndicator: boolean; } export default function CustomIframe(props: CustomIframeProps) { const [isLoading, setIsLoading] = React.useState(true); useEffect(() => { setTimeout(() => { setIsLoading(false); }, 10000); }, []); return ( <div style={{ position: "relative", width: "100%", height: "100%", }} > {isLoading && props.showLoadingIndicator && ( <Grid container direction="column" justifyContent="center" alignItems="center" style={{ height: "100%", width: "100%", position: "absolute", }} > <CircularProgress size="1.5rem" thickness={8} color="secondary" /> </Grid> )} <iframe src={props.url} style={{ height: "100%", width: "100%", position: "absolute", border: "none", ...props.style, }} ></iframe> </div> ); }