Loading dots icon

// loading-dots.tsx

// Note: these types can commonly go in a central file of utility types for
// all SVG icons, or can be baked into your component lib if you've made one for your
// icons
export type IconSize = 'sm' | 'base' | 'lg';

export type SvgIconProps = {
	size?: IconSize;
};

const iconSizeClasses = {
	sm: 'h-4',
	base: 'h-6',
	lg: 'h-6'
};

export const LoadingDots = ({
	size = 'base',
	title = 'Loading'
}: SvgIconProps & { title?: string }) => {
	const className = iconSizeClasses[size];
	return (
		<svg viewBox="0 0 60 30" xmlns="http://www.w3.org/2000/svg" className={className} role="img">
			<title>{title}</title>
			<g className="fill-current">
				<circle
					cx="12"
					cy="15"
					r="6"
					className="animate-pulse animation-delay-[0ms] animation-duration-[1.5s] opacity-0"
				/>
				<circle
					cx="30"
					cy="15"
					r="6"
					className="animate-pulse animation-delay-[200ms] animation-duration-[1.5s] opacity-0"
				/>
				<circle
					cx="48"
					cy="15"
					r="6"
					className="animate-pulse animation-delay-[400ms] animation-duration-[1.5s] opacity-0"
				/>
			</g>
		</svg>
	);
};

// tailwind.config.js

const plugin = require('tailwindcss/plugin');

module.exports = {
	// theme, content, etc.
	plugins: [
		plugin(({ addUtilities, matchUtilities, theme }) => {
			matchUtilities(
				{
					'animation-duration': (value) => ({
						animationDuration: value
					})
				},
				{ values: theme('transitionDuration') }
			);

			matchUtilities(
				{
					'animation-delay': (value) => ({
						animationDelay: value
					})
				},
				{ values: theme('transitionDelay') }
			);
		})
	]
};

// All the HTML attributes permitted on `button`, as well as a `loading` flag
type ButtonProps = JSX.IntrinsicElements['button'] & { loading?: boolean };

const Button = ({ loading = false }: ButtonProps) => {
	return <button>{loading ? <LoadingDots /> : 'Save'}</button>;
};