Question

我创建了一个包装器组件，用于响应我的应用程序上的按钮，当我在地图上加载内容时，会向按钮添加一个小svg加载微调器以向用户提供一些反馈。我注意到使用移动safari / chrome时svg微调器在我触发多个服务调用时往往会冻结，并且我正试图弄清楚如何平滑这个。

所以我的按钮看起来像 -

  constructor(props) {
    super(props);

    this.checkIfDisabled = this.checkIfDisabled.bind(this);
    this.renderButtonInner = this.renderButtonInner.bind(this);
  }

  checkIfDisabled() {
    if (this.props.isLoading) {
      return true;
    } else if (this.props.disabled === true) {
      return true;
    }
    return false;
  }

  renderButtonInner() {
    if (this.props.isLoading) {
      return (
        <div>
          <span className="button-loader"></span> {this.props.children}
        </div>
      );
    }
    return this.props.children;
  }

  render() {
    return (
      <button
        className={`LoadingButton ${this.props.styleClasses}`}
        onClick={this.props.onClick}
        disabled={this.checkIfDisabled()}
        type={this.props.type || 'button' }
        >
        {this.renderButtonInner()}
      </button>
    );
  }

和随附的CSS（scss）：

 .LoadingButton {
  .button-loader {
    background: url(/images/icons/loading-button.svg) center center no-repeat;
    background-size: contain;
    height: 20px;
    width: 20px;
    float: left;
  }
}

我一直在使用这个组件 -

 <LoadingButton
      isLoading={bool to tell if button is in loading state}
      styleClasses="my custom classes here"
      onClick={click callback here}
      >
       Button!
  </LoadingButton>

它一直适用于桌面，但我注意到在移动设备上，当异步调用被触发到我的后端时，微调器会冻结。我不确定我还应该做些什么来解决这个问题 - 也许我不应该使用svg作为背景图像？有没有更好的方法来添加这个可能阻止它冻结的微调器？谢谢你的阅读！

当异步调用触发时，React，svg spinner图标冻结

0 个答案: