export default function Component()

in src/components/tile-board.tsx [21:66]

• 40 lines of code
• 4 McCabe index (conditional complexity)

export default function Component() {

  const {
    isLoading,
    isError,
    error
  } = useGetUserQuery();

  const [showUhOh, setShowUhOh] = useState<Boolean>(false);
  const [timeExpired, setTimeExpired] = useState(false);

  useEffect(
    () => {
      if (isLoading) {
        let timer = setTimeout(() => setTimeExpired(true), 4000);
        return () => {
          clearTimeout(timer);
        };
      }
    },
    [isLoading]
  );


  if (isLoading && !timeExpired) {
    // a spinner
    return (
      <section onMouseEnter={() => setShowUhOh(true)} className="text-slate-300 bg-slate-800 rounded-l-xl my-4 col-span-3 space-y-4 p-4">
        <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
        </svg>
        <div className={`space-y-4 transition-all ease-in-out delay-1000 duration-1000 ${showUhOh ? 'opacity-100' : 'opacity-0'}`}>
          <p>
            Uh oh...
          </p>
          <p>
            This typically does not take this long.
          </p>
          <p>
            We will wait two more seconds and then show you an error message.
          </p>
        </div>
      </section>
    )
  }