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>

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()

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: '...';
+  }
+}