import * as React from "react" ; import { Classes } from "@blueprintjs/core" ; export interface ILoadableContentProps { /**
     * If true, render a skeleton. Otherwise render the single, non-string child passed to this
     * component.
     */ loading : boolean ; default variableLength ? : boolean ; } export class LoadableContent extends React . PureComponent < ILoadableContentProps > { private style : React . CSSProperties ; public constructor ( props ) { super ( props ) ; this . style = this . calculateStyle ( props . variableLength ) ; } public componentDidUpdate ( prevProps ) { if ( ( ! prevProps . loading && this . props . loading ) || prevProps . variableLength !== this . props . variableLength ) { this . style = this . calculateStyle ( this . props . variableLength ) ; } } public render ( ) { if ( this . props . loading ) { return < div className = { Classes . SKELETON } style = { this . style } / > ; } return React . Children . only ( this . props . children ) ; } private calculateStyle ( variableLength ) { const skeletonLength = variableLength ? 75 - Math . floor ( Math . random ( ) * 11 ) * 5 : 100 ; return { width : `${ skeletonLength }%` } ; } }