diff --git a/src/components/chat-message-item/markdown-message/markdown-message.scss b/src/components/chat-message-item/markdown-message/markdown-message.scss
index f569227f390231036d9bf459fbb20855d4e072c7..884f31a2354ec1eace6f147078cd4b24755604bc 100644
--- a/src/components/chat-message-item/markdown-message/markdown-message.scss
+++ b/src/components/chat-message-item/markdown-message/markdown-message.scss
@@ -14,6 +14,25 @@
   .anchor {
     display: none !important;
   }
+
+  @include when(loading) {
+    @include b(markdown-message-header) {
+      @include e(caption) {
+        font-size: 0;
+
+        &::after {
+          display: block;
+          width: 11px;
+          height: 11px;
+          content: '';
+          border: 3px solid #3b3b3b;
+          border-top-color: transparent;
+          border-radius: 100%;
+          animation: circle infinite 0.75s linear;
+        }
+      }
+    }
+  }
 }
 
 @include b(markdown-message-header) {
@@ -65,3 +84,13 @@
   display: flex;
   align-items: center;
 }
+
+@keyframes circle {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/components/chat-message-item/markdown-message/markdown-message.tsx b/src/components/chat-message-item/markdown-message/markdown-message.tsx
index 4d3a94d91cb4858bb7014d9a22696b7785406d68..401129887d30d042ce81cfe8ac321aa3e588dbc5 100644
--- a/src/components/chat-message-item/markdown-message/markdown-message.tsx
+++ b/src/components/chat-message-item/markdown-message/markdown-message.tsx
@@ -69,7 +69,7 @@ export const MarkdownMessage = (props: MarkdownMessageProps) => {
   };
 
   return (
-    <div className={ns.b()}>
+    <div className={`${ns.b()} ${ns.is('loading', message.state === 20)}`}>
       <div className={ns.b('header')}>
         <div className={ns.be('header', 'caption')}>AI </div>
         <div className={ns.b('header-action-wrapper')}>