diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-09-29 11:47:06 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-10-24 12:25:00 +0200 |
| commit | 81b1e0e05919eb368a66aef47adcf7738af76f29 (patch) | |
| tree | 758577d3f58d7025f84bca5bac9bc0da8432deb7 /src/components/atoms/loaders/spinner.tsx | |
| parent | 3272ac336da52364ace5ed76d8f609d4088ffc06 (diff) | |
refactor(components): rewrite Spinner component
* Message should be set as children
* Default message is no longer available (depending on use case, the
consumer might prefer aria-label instead)
* It is now possible to define the message position
Diffstat (limited to 'src/components/atoms/loaders/spinner.tsx')
| -rw-r--r-- | src/components/atoms/loaders/spinner.tsx | 35 |
1 files changed, 0 insertions, 35 deletions
diff --git a/src/components/atoms/loaders/spinner.tsx b/src/components/atoms/loaders/spinner.tsx deleted file mode 100644 index 968290b..0000000 --- a/src/components/atoms/loaders/spinner.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { FC } from 'react'; -import { useIntl } from 'react-intl'; -import styles from './spinner.module.scss'; - -export type SpinnerProps = { - /** - * The loading message. Default: "Loading...". - */ - message?: string; -}; - -/** - * Spinner component - * - * Render a loading message with animation. - */ -export const Spinner: FC<SpinnerProps> = ({ message }) => { - const intl = useIntl(); - - return ( - <div className={styles.wrapper}> - <div className={styles.ball}></div> - <div className={styles.ball}></div> - <div className={styles.ball}></div> - <div className={styles.text}> - {message ?? - intl.formatMessage({ - defaultMessage: 'Loading...', - description: 'Spinner: loading text', - id: 'q9cJQe', - })} - </div> - </div> - ); -}; |
