Grasscutters/Grasscutter
3
0
Fork 0
mirror of https://github.com/Melledy/Grasscutter.git synced 2024-11-23 07:10:46 +00:00
Code Issues Projects Releases Wiki Activity

Load items faster

Browse Source
This commit is contained in:
KingRainbow44 2023-04-08 23:35:20 -04:00
parent 6c2f66fa2d
commit 32f11e29b1
No known key found for this signature in database
GPG Key ID: FC2CB64B00D257BE
1 changed files with 30 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/handbook/src/ui/widgets/Item.tsx
View File

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