From e29e145b053a5b1f338cef8a0721e185e955cdc2 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 4 Apr 2022 11:53:44 +0200
Subject: chore: add a Spinner component

---
 src/components/atoms/loaders/spinner.tsx | 37 ++++++++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 src/components/atoms/loaders/spinner.tsx

(limited to 'src/components/atoms/loaders/spinner.tsx')

diff --git a/src/components/atoms/loaders/spinner.tsx b/src/components/atoms/loaders/spinner.tsx
new file mode 100644
index 0000000..57b0a43
--- /dev/null
+++ b/src/components/atoms/loaders/spinner.tsx
@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './spinner.module.scss';
+
+type SpinnerProps = {
+  /**
+   * The loading message. Default: "Loading...".
+   */
+  message?: string;
+};
+
+/**
+ * Spinner component
+ *
+ * Render a loading message with animation.
+ */
+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>
+  );
+};
+
+export default Spinner;
-- 
cgit v1.2.3