[React] Delay the Appearance of a Loading Spinner with CSS in React

Eager delay spinners are not a good user experience.
They can make a snappy user interface feel slower.

We want delay spinners to appear only after a perceivable delay.
useTransition doesn't yet have an API for customizing this.
Until it does, we can use CSS animations to delay visibility of delay spinners.

 

import React from "react";

export function DelaySpinner() {
  return (
    <span role="img" aria-label="spinner" className="DelaySpinner">
      <style>{`
        .DelaySpinner {
          {/* apply two animation at the same time,
            0s linear 0.5s forwards makeVisible: start immedicatly, wait for 0.5s
          */}
          animation: 0s linear 0.5s forwards makeVisible, rotation 1.5s infinite linear;
          display: inline-block;
          font-size: .7rem;
          visibility: hidden;
        }

        @keyframes rotation {
          from { transform: rotate(0deg) }
          to { transform: rotate(359deg) }
        }

        @keyframes makeVisible {
          to {
            visibility: visible;
          }
        }
      `}</style>
      🌀
    </span>
  );
}