From 7b1a70446d3df7b2dcda875f4506a40159912d28 Mon Sep 17 00:00:00 2001
From: enes <enes@nostrdev.com>
Date: Thu, 14 Nov 2024 11:29:01 +0100
Subject: [PATCH] feat: spinner and new dots loader

---
 src/components/Spinner.tsx         |  9 +++++++++
 src/pages/home.tsx                 |  9 +--------
 src/styles/dotsSpinner.module.scss | 18 ++++++++++++++++++
 3 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 src/components/Spinner.tsx
 create mode 100644 src/styles/dotsSpinner.module.scss

diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
new file mode 100644
index 0000000..8398991
--- /dev/null
+++ b/src/components/Spinner.tsx
@@ -0,0 +1,9 @@
+import styles from '../styles/dotsSpinner.module.scss'
+
+export const Spinner = () => (
+  <div className='spinner'>
+    <div className='spinnerCircle'></div>
+  </div>
+)
+
+export const Dots = () => <div className={styles.loading}></div>
diff --git a/src/pages/home.tsx b/src/pages/home.tsx
index 19cbb90..c7aef26 100644
--- a/src/pages/home.tsx
+++ b/src/pages/home.tsx
@@ -36,6 +36,7 @@ import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
 import { LoadingSpinner } from 'components/LoadingSpinner'
+import { Spinner } from 'components/Spinner'
 
 export const HomePage = () => {
   const navigate = useNavigate()
@@ -310,14 +311,6 @@ const DisplayLatestMods = () => {
   )
 }
 
-const Spinner = () => {
-  return (
-    <div className='spinner'>
-      <div className='spinnerCircle'></div>
-    </div>
-  )
-}
-
 const DisplayLatestBlogs = () => {
   const [blogs, setBlogs] = useState<Partial<BlogCardDetails>[]>()
   const { fetchEvents } = useNDKContext()
diff --git a/src/styles/dotsSpinner.module.scss b/src/styles/dotsSpinner.module.scss
new file mode 100644
index 0000000..772dfa8
--- /dev/null
+++ b/src/styles/dotsSpinner.module.scss
@@ -0,0 +1,18 @@
+.loading::after {
+  content: '.';
+  animation: dots 1.5s steps(4, end) infinite;
+}
+
+@keyframes dots {
+  0%,
+  20% {
+    content: '.\00a0\00a0';
+  }
+  40% {
+    content: '..\00a0';
+  }
+  60%,
+  100% {
+    content: '...';
+  }
+}