diff --git a/src/components/chat-toolbar/chat-toolbar.scss b/src/components/chat-toolbar/chat-toolbar.scss
index d5c52412d41dbad4715270ef7802eafa1b48dd38..4a6eda53dbcac43bd6ad7a534979fb11f82ac0dd 100644
--- a/src/components/chat-toolbar/chat-toolbar.scss
+++ b/src/components/chat-toolbar/chat-toolbar.scss
@@ -33,7 +33,7 @@
 
     @include when(loading) {
       pointer-events: none;
-      animation: loading-change 0.8s infinite;
+      color: #{getCssVar('ai-chat', 'disabled-color')};
     }
   }
 
diff --git a/src/components/chat-toolbar/chat-toolbar.tsx b/src/components/chat-toolbar/chat-toolbar.tsx
index e5ab2cfac7de35325930d1cdf27a0202a616e6a1..2d790ef6541bcb66ed61fe388a762de1683f2c38 100644
--- a/src/components/chat-toolbar/chat-toolbar.tsx
+++ b/src/components/chat-toolbar/chat-toolbar.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { h } from 'preact';
+import { useMemo } from 'preact/hooks';
 import { Namespace } from '../../utils';
 import { IChatToolbarItem } from '../../interface';
 import { AiChatController } from '../../controller';
@@ -163,6 +164,10 @@ export const ChatToolbar = (props: ChatToolbarProps) => {
     item.onClick?.(e, controller.context, controller.params, data);
   };
 
+  const isLoadding = useMemo(() => {
+    return data.state === 20 && data.completed !== true;
+  }, [data.state, data.completed]);
+
   return (
     <div className={`${ns.b()} ${ns.e(style)} ${className || ''}`}>
       {toolbarItems.map((item, index) => {
@@ -173,7 +178,7 @@ export const ChatToolbar = (props: ChatToolbarProps) => {
             className={`${ns.e('item')} ${ns.is(
               'disabled',
               disabled(item),
-            )} ${ns.is('loading', data.state === 20)} ${className || ''}`}
+            )} ${ns.is('loading', isLoadding)} ${className || ''}`}
             title={item.title}
             onClick={e => handleItemClick(e, item)}
           >