diff --git a/web/app/components/base/chat/chat/loading-anim/style.module.css b/web/app/components/base/chat/chat/loading-anim/style.module.css
index b1371ec82a..d5a373df6f 100644
--- a/web/app/components/base/chat/chat/loading-anim/style.module.css
+++ b/web/app/components/base/chat/chat/loading-anim/style.module.css
@@ -1,6 +1,6 @@
 .dot-flashing {
   position: relative;
-  animation: 1s infinite linear alternate;
+  animation: dot-flashing 1s infinite linear alternate;
   animation-delay: 0.5s;
 }
 
@@ -10,7 +10,7 @@
   display: inline-block;
   position: absolute;
   top: 0;
-  animation: 1s infinite linear alternate;
+  animation: dot-flashing 1s infinite linear alternate;
 }
 
 .dot-flashing::before {
@@ -51,15 +51,21 @@
   border-radius: 50%;
   background-color: #667085;
   color: #667085;
-  animation-name: dot-flashing;
+  animation: dot-flashing 1s infinite linear alternate;
+}
+
+.text {
+  animation-delay: 0.5s;
 }
 
 .text::before {
   left: -7px;
+  animation-delay: 0s;
 }
 
 .text::after {
   left: 7px;
+  animation-delay: 1s;
 }
 
 .avatar,
@@ -70,13 +76,19 @@
   border-radius: 50%;
   background-color: #155EEF;
   color: #155EEF;
-  animation-name: dot-flashing-avatar;
+  animation: dot-flashing-avatar 1s infinite linear alternate;
+}
+
+.avatar {
+  animation-delay: 0.5s;
 }
 
 .avatar::before {
   left: -5px;
+  animation-delay: 0s;
 }
 
 .avatar::after {
   left: 5px;
+  animation-delay: 1s;
 }