diff --git a/src/handbook/src/ui/widgets/Item.tsx b/src/handbook/src/ui/widgets/Item.tsx index 155e65ed5..e7d1dab87 100644 --- a/src/handbook/src/ui/widgets/Item.tsx +++ b/src/handbook/src/ui/widgets/Item.tsx @@ -12,15 +12,19 @@ interface IProps { interface IState { popout: boolean; icon: boolean; + loaded: boolean; } class Item extends React.Component { + loading: number | any; + constructor(props: IProps) { super(props); this.state = { popout: false, - icon: true + icon: true, + loaded: false }; } @@ -29,23 +33,37 @@ class Item extends React.Component { * @private */ private replaceIcon(): void { - this.setState({ icon: false }); + this.setState({ icon: false, loaded: false }); + } + + private forceReplace(): void { + if (!this.state.loaded) + this.replaceIcon(); + } + + componentDidMount() { + this.loading = setTimeout(this.forceReplace.bind(this), 1e3); + } + + componentWillUnmount() { + clearTimeout(this.loading); + this.loading = null; } render() { return (
- { - this.state.icon ? ( - {this.props.data.name} - ) :

{this.props.data.name}

- } + { this.state.icon && {this.props.data.name} this.setState({ loaded: true })} + /> } + + { (!this.state.loaded || !this.state.icon) && +

{this.props.data.name}

}