Without Conceptual Hooks

Button.tsx

import React, { useState, useEffect, useCallback } from 'react';
import Loader from '../Loader';

const Button = ({ label, isLoading }) => {
  const [hasFocus, setHasFocus] = useState<boolean>(false);
  const [hasLoader, setHasLoader] = useState<boolean>(false);
  const handleFocus = useCallback(() => {
    setHasFocus(true);
  }, []);
  const handleBlur = useCallback(() => {
    setHasFocus(false);
  }, []);

  useEffect(() => {
    if (isLoading && !hasFocus) {
      return setHasLoader(true);
    }

    return setHasLoader(false);
  }, [isLoading, hasFocus]);

  return (
    <button type="button" onFocus={handleFocus} onBlur={handleBlur}>
      {hasLoader ? <Loader /> : label}
    </button>
  );
};

export default Button;