反应-油门/防弹条（加载消息）-如果请求速度超过X毫秒则不显示

Question

我正在我的React应用中准备微调器。

效果很好。但是，一些UX提示说，应该在等待一段时间后显示spinner / loader / etc。对于此示例，假设它应该为750ms。

如何重新渲染组件（我仍然不确定有什么区别）？

在上面的示例中，加载状态不应随时出现。

Answer 1

您可以创建一个DelayedSpinner组件，以在componentDidMount中启动计时器，并在计时器经过后呈现微调器：

class DelayedSpinner extends Component {
    state = {
        showSpinner: false,
    };

    componentDidMount() {
        this.timer = setTimeout(
            () => this.setState({showSpinner: true}), 
            this.props.delay
        );
    }

    componentWillUnmount() {
        clearTimeout(this.timer);
    }

    render() {
        return this.state.showSpinner && <Spinner />;
    }
}

用法：

render() {
    if (loading) return <DelayedSpinner delay={750} />

    return(
        {/* render loaded data */}
    );
}

然后，您可以在启动请求后渲染该微调器，它只会在一定的延迟后显示。

Answer 2

您可以使用setTimeout和clearTimeout来反跳

componentDidMount() {
    let debounceTime = 100;
    let timeoutId = setTimeout(() => this.setState({ loading: true }), debounceTime);
    fakeApiCall().then(() => {
      clearTimeout(timeoutId);
      this.setState({
        loading: false
      })
    });
  }

它将在去抖时间结束后将加载设置为true。如果请求花费的时间较少，则将在承诺中将其清除。

您可能想添加一个新的状态，如“正在初始化”之类的。否则，如果您仅在加载时启动应用程序：false（在等待去抖动器的同时），您最初会看到“确定，有数据”消息

此外，您可以使组件可配置并从道具花费去抖时间

Answer 3

带有挂钩和效果：

const DelayedSpinner = ({ size }) => {
  const [showSpinner, setShowSpinner] = useState(false);

  useEffect(() => {
    const timer = setTimeout(() => setShowSpinner(true), 750);

    return () => clearTimeout(timer);
  });

  return showSpinner && <Spinner size={size} color="primary" />;
};