misc_pterodactyl-panel/resources/scripts/components/elements/InputSpinner.tsx

import React from 'react';
import Spinner from '@/components/elements/Spinner';
import Fade from '@/components/elements/Fade';
import tw from 'twin.macro';

const InputSpinner = ({ visible, children }: { visible: boolean, children: React.ReactNode }) => (
    <div css={tw`relative`}>
        <Fade
            appear
            unmountOnExit
            in={visible}
            timeout={150}
        >
            <div css={tw`absolute right-0 h-full flex items-center justify-end pr-3`}>
                <Spinner size={'small'}/>
            </div>
        </Fade>
        {children}
    </div>
);

export default InputSpinner;