import { Box, Loader, LoaderProps } from '@wix/design-system';
import React, { ReactNode } from 'react';

export interface TextWidthLoaderProps extends Partial<LoaderProps> {
  text?: ReactNode;
}

export function TextWidthLoader(props: TextWidthLoaderProps) {
  const { text, ...rest } = props;
  return (
    <Box align="center" verticalAlign="middle" position="relative">
      <Box visibility="hidden">{text}</Box>
      <Box position="absolute">
        <Loader {...rest} />
      </Box>
    </Box>
  );
}