Load items faster

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<IProps, IState> {
+    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<IProps, IState> {
      * @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 (
             <div className={"Item"}>
                 <div className={"Item_Background"}>
-                    {
+                    { this.state.icon && <img
-                        this.state.icon ? (
+                        className={"Item_Icon"}
-                            <img
+                        alt={this.props.data.name}
-                                className={"Item_Icon"}
+                        src={itemIcon(this.props.data)}
-                                alt={this.props.data.name}
+                        onError={this.replaceIcon.bind(this)}
-                                src={itemIcon(this.props.data)}
+                        onLoad={() => this.setState({ loaded: true })}
-                                onError={this.replaceIcon.bind(this)}
+                    /> }
-                            />
+
-                        ) : <p className={"Item_Label"}>{this.props.data.name}</p>
+                    { (!this.state.loaded || !this.state.icon) &&
-                    }
+                        <p className={"Item_Label"}>{this.props.data.name}</p> }
                 </div>
 
                 <div className={"Item_Info"}>