Ant Design's Input with loading spinner

AntdInput.tsx

import React, { useEffect } from 'react';

import { createUseStyles } from 'react-jss';

import { Input } from 'antd';
import { InputProps } from 'antd/lib/input';

// ---------------------------------------------------------------------------
const useAntdInputStyles = createUseStyles({
  antdInputContainer: {
    position: 'relative',
    display: 'inline-block'
  },
  antdInputSpinner: {
    position: 'absolute',
    right: '50px',
    top: '50%',
    transform: 'translateY(-50%)'
  }
});

// ---------------------------------------------------------------------------
interface AntdInputProps extends InputProps {
  loading: boolean;
}

// ---------------------------------------------------------------------------
export const AntdInput: React.FC<AntdInputProps> = ({ loading, ...rest }: AntdInputProps) => {
  // ---------------------------------------------------------------------------
  const classes = useAntdInputStyles();

  // ---------------------------------------------------------------------------
  useEffect(() => {

    },
    [loading]
  );

  // ---------------------------------------------------------------------------
  const getSpinner = (): JSX.Element => {
    return (
      <span className={`${classes.antdInputSpinner} ant-select-arrow ant-select-arrow-loading`}
            unselectable="on"
            aria-hidden="true"
            style={{ userSelect: 'none' }}>
        <span role="img"
              aria-label="loading"
              className="anticon anticon-loading anticon-spin">
          <svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em"
               fill="currentColor"
               aria-hidden="true">
            <path
              d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
          </svg>
        </span>
      </span>
    );
  };

  // ---------------------------------------------------------------------------
  return (
    <div className={classes.antdInputContainer}>
      <Input
        {...rest}
      />
      {loading ? getSpinner() : null}
    </div>
  );
};

export {
  AntdInput as default,
  AntdInputProps
};

I made this because the standard Input does not contain the loading indicator - just like the Select have.