import React , { useState } from "react" ; import { Frame } from "./frame" ; import Spinner from "./spinner" ; import styled from "@emotion/styled" ; interface ProviderPageProps { url : string ; active : boolean ; } const ProviderPageWrapper = styled . div `
  border: 0;
  width: 100%;
  height: 100%;
  padding: 1rem;
` ; const ProviderPageFrame = ( { url , active } ) => { const [ loading , setLoading ] = useState ( true ) ; const hideSpinner = ( ) => { setLoading ( false ) ; } ; const frame = url && ( < Frame src = { url } onLoad = { hideSpinner } height = { "100%" } style = { { display : ! loading ? "block" : "none" } } />); return ( < ProviderPageWrapper style = { { display : active ? "block" : "none" } } > { loading ? < Spinner / > : null } { frame } < /ProviderPageWrapper>); } ; export default ProviderPageFrame ;