React - Throttle/debounce spinner (loading message) - not show if request is faster than X milliseconds

Question

I'm preparing spinners in my react app.

It works great. However, some UX tips say, that spinner/loader/etc should be displayed after some waiting time. For this example, let's say it should be 750ms.

How can I throttle/debounce (I'm still not sure what is the difference) re-render component?

In above example, loading state should not be appear anytime.

Answer 1

With Hooks and effects:

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;