From a314148ad1072635c00be246ee6ae93edc2dd6b6 Mon Sep 17 00:00:00 2001
From: Bel Curcio <curciobel@gmail.com>
Date: Mon, 7 Jun 2021 16:08:06 -0300
Subject: [PATCH] LoadingDots Working (:

---
 .../ui/LoadingDots/LoadingDots.module.css     | 29 ++++++++++---------
 components/ui/LoadingDots/LoadingDots.tsx     |  6 ++--
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/components/ui/LoadingDots/LoadingDots.module.css b/components/ui/LoadingDots/LoadingDots.module.css
index 01da9b154..6054de3c7 100644
--- a/components/ui/LoadingDots/LoadingDots.module.css
+++ b/components/ui/LoadingDots/LoadingDots.module.css
@@ -1,22 +1,23 @@
 .root {
   @apply inline-flex text-center items-center leading-7;
+}
 
-  & span {
-    @apply bg-accent-6 rounded-full h-2 w-2;
-    animation-name: blink;
-    animation-duration: 1.4s;
-    animation-iteration-count: infinite;
-    animation-fill-mode: both;
-    margin: 0 2px;
+.root .dot {
+  @apply rounded-full h-2 w-2;
+  background-color: currentColor;
+  animation-name: blink;
+  animation-duration: 1.4s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: both;
+  margin: 0 2px;
+}
 
-    &:nth-of-type(2) {
-      animation-delay: 0.2s;
-    }
+.root .dot:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
 
-    &:nth-of-type(3) {
-      animation-delay: 0.4s;
-    }
-  }
+.root .dot::nth-of-type(3) {
+  animation-delay: 0.4s;
 }
 
 @keyframes blink {
diff --git a/components/ui/LoadingDots/LoadingDots.tsx b/components/ui/LoadingDots/LoadingDots.tsx
index 10e5bbae1..27ce9f25f 100644
--- a/components/ui/LoadingDots/LoadingDots.tsx
+++ b/components/ui/LoadingDots/LoadingDots.tsx
@@ -3,9 +3,9 @@ import s from './LoadingDots.module.css'
 const LoadingDots: React.FC = () => {
   return (
     <span className={s.root}>
-      <span />
-      <span />
-      <span />
+      <span className={s.dot} key={`dot_1`} />
+      <span className={s.dot} key={`dot_2`} />
+      <span className={s.dot} key={`dot_3`} />
     </span>
   )
 }