javascript - React - Throttle/debounce spinner (loading message) - 如果请求快于 X 毫秒则不显示

Question

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

效果很好。然而，一些 UX 提示说，spinner/loader/etc 应该在等待一段时间后显示。对于这个例子，假设它应该是 750 毫秒。

我如何限制/去抖动(我仍然不确定有什么区别)重新渲染组件？

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

Answer 1

带有钩子(Hook)和效果:

import React, { useEffect, useState } from 'react';

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" />;
};

export default DelayedSpinner;