diff --git a/client/web/src/plugin/component/index.tsx b/client/web/src/plugin/component/index.tsx
index 456a206c..1a3beb63 100644
--- a/client/web/src/plugin/component/index.tsx
+++ b/client/web/src/plugin/component/index.tsx
@@ -44,6 +44,7 @@ export {
 } from '@/components/Modal';
 export { Loadable } from '@/components/Loadable';
 export { Loading } from '@/components/Loading';
+export { LoadingOnFirst } from '@/components/LoadingOnFirst';
 export { SidebarView } from '@/components/SidebarView';
 export { GroupPanelSelector } from '@/components/GroupPanelSelector';
 export { Emoji } from '@/components/Emoji';
diff --git a/client/web/tailchat.d.ts b/client/web/tailchat.d.ts
index e377c7bd..1ab8bc10 100644
--- a/client/web/tailchat.d.ts
+++ b/client/web/tailchat.d.ts
@@ -332,7 +332,7 @@ declare module '@capital/component' {
 
   export const PillTabPane: any;
 
-  export const LoadingSpinner: any;
+  export const LoadingSpinner: React.FC<{ tip?: string }>;
 
   export const WebFastForm: any;
 
@@ -382,7 +382,19 @@ declare module '@capital/component' {
 
   export const Loadable: any;
 
-  export const Loading: any;
+  export const Loading: React.FC<{
+    spinning: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+  }>;
+
+  export const LoadingOnFirst: React.FC<{
+    spinning: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+  }>;
 
   export const SidebarView: any;
 
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx
index 8e114f61..396770e6 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/components/TopicCard.tsx
@@ -72,6 +72,7 @@ export const TopicCard: React.FC<{
     });
 
     setComment('');
+    toggleShowReply();
     showSuccessToasts();
   }, [topic.groupId, topic.panelId, topic._id, comment]);
 
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx
index 87165711..b34c865b 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/src/group/GroupTopicPanelRender.tsx
@@ -1,20 +1,24 @@
 import React, { useCallback, useEffect } from 'react';
 import { TopicCard } from '../components/TopicCard';
-import { useAsyncRequest, useGroupPanelContext } from '@capital/common';
+import {
+  useAsyncRequest,
+  useGlobalSocketEvent,
+  useGroupPanelContext,
+} from '@capital/common';
 import {
   Button,
   Empty,
   IconBtn,
   openModal,
   closeModal,
-  LoadingSpinner,
+  LoadingOnFirst,
 } from '@capital/component';
 import { request } from '../request';
 import { Translate } from '../translate';
 import { TopicCreate } from '../components/modals/TopicCreate';
 import styled from 'styled-components';
 
-const Root = styled.div({
+const Root = styled(LoadingOnFirst)({
   display: 'flex',
   flexDirection: 'column',
   width: '100%',
@@ -53,6 +57,14 @@ const GroupTopicPanelRender: React.FC = React.memo(() => {
     fetch();
   }, [fetch]);
 
+  useGlobalSocketEvent('plugin:com.msgbyte.topic.create', () => {
+    fetch();
+  });
+
+  useGlobalSocketEvent('plugin:com.msgbyte.topic.createComment', () => {
+    fetch();
+  });
+
   const handleCreateTopic = useCallback(() => {
     const key = openModal(
       <TopicCreate
@@ -71,12 +83,8 @@ const GroupTopicPanelRender: React.FC = React.memo(() => {
     );
   }, [panelInfo, fetch]);
 
-  if (loading) {
-    return <LoadingSpinner />;
-  }
-
   return (
-    <Root>
+    <Root spinning={loading}>
       {Array.isArray(list) && list.length > 0 ? (
         list.map((item, i) => <TopicCard key={i} topic={item} />)
       ) : (
diff --git a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/types/tailchat.d.ts b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/types/tailchat.d.ts
index f7d54660..e377c7bd 100644
--- a/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/types/tailchat.d.ts
+++ b/server/plugins/com.msgbyte.topic/web/plugins/com.msgbyte.topic/types/tailchat.d.ts
@@ -72,6 +72,11 @@ declare module '@capital/common' {
 
   export const getGlobalState: any;
 
+  export const useGlobalSocketEvent: <T>(
+    eventName: string,
+    callback: (data: T) => void
+  ) => void;
+
   export const getJWTUserInfo: () => Promise<{
     _id?: string;
     nickname?: string;