From 08458c0c930fc0b4af787bfa0f48a2719923474b Mon Sep 17 00:00:00 2001
From: "plebeius.eth" <mottoes_recap0u@icloud.com>
Date: Fri, 22 Mar 2024 14:12:13 +0100
Subject: [PATCH] add loading ellipsis component

---
 src/components/loading-ellipsis/index.ts      |  1 +
 .../loading-ellipsis.module.css               | 24 +++++++++++++++++++
 .../loading-ellipsis/loading-ellipsis.tsx     | 11 +++++++++
 3 files changed, 36 insertions(+)
 create mode 100644 src/components/loading-ellipsis/index.ts
 create mode 100644 src/components/loading-ellipsis/loading-ellipsis.module.css
 create mode 100644 src/components/loading-ellipsis/loading-ellipsis.tsx

diff --git a/src/components/loading-ellipsis/index.ts b/src/components/loading-ellipsis/index.ts
new file mode 100644
index 00000000..c201e034
--- /dev/null
+++ b/src/components/loading-ellipsis/index.ts
@@ -0,0 +1 @@
+export { default } from './loading-ellipsis';
diff --git a/src/components/loading-ellipsis/loading-ellipsis.module.css b/src/components/loading-ellipsis/loading-ellipsis.module.css
new file mode 100644
index 00000000..69049ce1
--- /dev/null
+++ b/src/components/loading-ellipsis/loading-ellipsis.module.css
@@ -0,0 +1,24 @@
+.ellipsis {
+  display: inline-block;
+}
+
+.ellipsis:after {
+  content: '...';
+  position: absolute;
+  -webkit-animation: ellipsis steps(4, end) 1200ms infinite;
+  animation: ellipsis steps(4, end) 1500ms infinite;
+  width: 0px;
+  overflow: hidden;
+}
+
+@keyframes ellipsis {
+  to {
+    width: 1.3em;
+  }
+}
+
+@-webkit-keyframes ellipsis {
+  to {
+    width: 1.3em;
+  }
+}
\ No newline at end of file
diff --git a/src/components/loading-ellipsis/loading-ellipsis.tsx b/src/components/loading-ellipsis/loading-ellipsis.tsx
new file mode 100644
index 00000000..639d62f4
--- /dev/null
+++ b/src/components/loading-ellipsis/loading-ellipsis.tsx
@@ -0,0 +1,11 @@
+import styles from './loading-ellipsis.module.css';
+
+interface LoadingEllipsisProps {
+  string: string;
+}
+
+const LoadingEllipsis = ({ string }: LoadingEllipsisProps) => {
+  return <span className={styles.ellipsis}>{string}</span>;
+};
+
+export default LoadingEllipsis;