@lobehub/lobehub 2.0.0-next.182 → 2.0.0-next.184

package/CHANGELOG.md

@@ -2,6 +2,56 @@
 
 # Changelog
 
+## [Version 2.0.0-next.184](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.183...v2.0.0-next.184)
+
+<sup>Released on **2026-01-01**</sup>
+
+#### 💄 Styles
+
+- **misc**: Improve loading and local-system render.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### Styles
+
+- **misc**: Improve loading and local-system render, closes [#11087](https://github.com/lobehub/lobe-chat/issues/11087) ([44630bc](https://github.com/lobehub/lobe-chat/commit/44630bc))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
+## [Version 2.0.0-next.183](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.182...v2.0.0-next.183)
+
+<sup>Released on **2025-12-31**</sup>
+
+#### 🐛 Bug Fixes
+
+- **store**: Clear new key data when switchTopic to new state.
+
+<br/>
+
+<details>
+<summary><kbd>Improvements and Fixes</kbd></summary>
+
+#### What's fixed
+
+- **store**: Clear new key data when switchTopic to new state, closes [#11078](https://github.com/lobehub/lobe-chat/issues/11078) ([180ea14](https://github.com/lobehub/lobe-chat/commit/180ea14))
+
+</details>
+
+<div align="right">
+
+[![](https://img.shields.io/badge/-BACK_TO_TOP-151515?style=flat-square)](#readme-top)
+
+</div>
+
 ## [Version 2.0.0-next.182](https://github.com/lobehub/lobe-chat/compare/v2.0.0-next.181...v2.0.0-next.182)
 
 <sup>Released on **2025-12-31**</sup>

package/changelog/v1.json

@@ -1,4 +1,18 @@
 [
+  {
+    "children": {
+      "improvements": [
+        "Improve loading and local-system render."
+      ]
+    },
+    "date": "2026-01-01",
+    "version": "2.0.0-next.184"
+  },
+  {
+    "children": {},
+    "date": "2025-12-31",
+    "version": "2.0.0-next.183"
+  },
   {
     "children": {
       "features": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/lobehub",
-  "version": "2.0.0-next.182",
+  "version": "2.0.0-next.184",
   "description": "LobeHub - an open-source,comprehensive AI Agent framework that supports speech synthesis, multimodal, and extensible Function Call plugin system. Supports one-click free deployment of your private ChatGPT/LLM web application.",
   "keywords": [
     "framework",

package/packages/builtin-tool-local-system/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "exports": {
     ".": "./src/index.ts",
+    "./client": "./src/client/index.ts",
     "./executionRuntime": "./src/ExecutionRuntime/index.ts"
   },
   "main": "./src/index.ts",
@@ -12,5 +13,14 @@
   },
   "devDependencies": {
     "@lobechat/types": "workspace:*"
+  },
+  "peerDependencies": {
+    "@lobehub/ui": "^4",
+    "antd": "^6",
+    "antd-style": "*",
+    "lucide-react": "*",
+    "path-browserify-esm": "*",
+    "react": "*",
+    "react-i18next": "*"
   }
 }

package/packages/builtin-tool-local-system/src/client/Inspector/EditLocalFile/index.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { type EditLocalFileParams } from '@lobechat/electron-client-ipc';
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check, X } from 'lucide-react';
+import path from 'path-browserify-esm';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
+
+import { type EditLocalFileState } from '../../../types';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  root: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    color: ${cssVar.colorTextSecondary};
+  `,
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+export const EditLocalFileInspector = memo<
+  BuiltinInspectorProps<EditLocalFileParams, EditLocalFileState>
+>(({ args, partialArgs, isArgumentsStreaming, pluginState, isLoading }) => {
+  const { t } = useTranslation('plugin');
+
+  // Show filename with parent directory for context
+  const filePath = args?.file_path || partialArgs?.file_path || '';
+  let displayPath = '';
+  if (filePath) {
+    const { base, dir } = path.parse(filePath);
+    const parentDir = path.basename(dir);
+    displayPath = parentDir ? `${parentDir}/${base}` : base;
+  }
+
+  // During argument streaming
+  if (isArgumentsStreaming) {
+    if (!displayPath)
+      return (
+        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-local-system.apiName.editLocalFile')}</span>
+        </div>
+      );
+
+    return (
+      <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-local-system.apiName.editLocalFile')}: </span>
+        <span className={highlightTextStyles.primary}>{displayPath}</span>
+      </div>
+    );
+  }
+
+  // Check if edit was successful (has replacements count)
+  const isSuccess = pluginState?.replacements !== undefined && pluginState.replacements >= 0;
+
+  return (
+    <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
+      <span style={{ marginInlineStart: 2 }}>
+        <span>{t('builtins.lobe-local-system.apiName.editLocalFile')}: </span>
+        {displayPath && <span className={highlightTextStyles.primary}>{displayPath}</span>}
+        {isLoading ? null : pluginState ? (
+          isSuccess ? (
+            <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+          ) : (
+            <X className={styles.statusIcon} color={cssVar.colorError} size={14} />
+          )
+        ) : null}
+      </span>
+    </div>
+  );
+});
+
+EditLocalFileInspector.displayName = 'EditLocalFileInspector';

package/packages/builtin-tool-local-system/src/client/Inspector/GlobLocalFiles/index.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { type GlobFilesParams } from '@lobechat/electron-client-ipc';
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check, X } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
+
+import { type GlobFilesState } from '../../..';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  root: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    color: ${cssVar.colorTextSecondary};
+  `,
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+export const GlobLocalFilesInspector = memo<BuiltinInspectorProps<GlobFilesParams, GlobFilesState>>(
+  ({ args, partialArgs, isArgumentsStreaming, pluginState, isLoading }) => {
+    const { t } = useTranslation('plugin');
+
+    const pattern = args?.pattern || partialArgs?.pattern || '';
+
+    // During argument streaming
+    if (isArgumentsStreaming) {
+      if (!pattern)
+        return (
+          <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+            <span>{t('builtins.lobe-local-system.apiName.globLocalFiles')}</span>
+          </div>
+        );
+
+      return (
+        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-local-system.apiName.globLocalFiles')}: </span>
+          <span className={highlightTextStyles.primary}>{pattern}</span>
+        </div>
+      );
+    }
+
+    // Check if glob was successful
+    const isSuccess = pluginState?.result?.success;
+
+    return (
+      <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
+        <span style={{ marginInlineStart: 2 }}>
+          <span>{t('builtins.lobe-local-system.apiName.globLocalFiles')}: </span>
+          {pattern && <span className={highlightTextStyles.primary}>{pattern}</span>}
+          {isLoading ? null : pluginState?.result ? (
+            isSuccess ? (
+              <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+            ) : (
+              <X className={styles.statusIcon} color={cssVar.colorError} size={14} />
+            )
+          ) : null}
+        </span>
+      </div>
+    );
+  },
+);
+
+GlobLocalFilesInspector.displayName = 'GlobLocalFilesInspector';

package/packages/builtin-tool-local-system/src/client/Inspector/GrepContent/index.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { type GrepContentParams } from '@lobechat/electron-client-ipc';
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check, X } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
+
+import { type GrepContentState } from '../../..';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  root: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    color: ${cssVar.colorTextSecondary};
+  `,
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+export const GrepContentInspector = memo<
+  BuiltinInspectorProps<GrepContentParams, GrepContentState>
+>(({ args, partialArgs, isArgumentsStreaming, pluginState, isLoading }) => {
+  const { t } = useTranslation('plugin');
+
+  const pattern = args?.pattern || partialArgs?.pattern || '';
+
+  // During argument streaming
+  if (isArgumentsStreaming) {
+    if (!pattern)
+      return (
+        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-local-system.apiName.grepContent')}</span>
+        </div>
+      );
+
+    return (
+      <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-local-system.apiName.grepContent')}: </span>
+        <span className={highlightTextStyles.primary}>{pattern}</span>
+      </div>
+    );
+  }
+
+  // Check if grep was successful
+  const isSuccess = pluginState?.result?.success;
+
+  return (
+    <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
+      <span style={{ marginInlineStart: 2 }}>
+        <span>{t('builtins.lobe-local-system.apiName.grepContent')}: </span>
+        {pattern && <span className={highlightTextStyles.primary}>{pattern}</span>}
+        {isLoading ? null : pluginState?.result ? (
+          isSuccess ? (
+            <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+          ) : (
+            <X className={styles.statusIcon} color={cssVar.colorError} size={14} />
+          )
+        ) : null}
+      </span>
+    </div>
+  );
+});
+
+GrepContentInspector.displayName = 'GrepContentInspector';

package/packages/builtin-tool-local-system/src/client/Inspector/ReadLocalFile/index.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { type LocalReadFileParams } from '@lobechat/electron-client-ipc';
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check, X } from 'lucide-react';
+import path from 'path-browserify-esm';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
+
+import { type LocalReadFileState } from '../../..';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  root: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    color: ${cssVar.colorTextSecondary};
+  `,
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+export const ReadLocalFileInspector = memo<
+  BuiltinInspectorProps<LocalReadFileParams, LocalReadFileState>
+>(({ args, partialArgs, isArgumentsStreaming, pluginState, isLoading }) => {
+  const { t } = useTranslation('plugin');
+
+  // Show filename with parent directory for context
+  const filePath = args?.path || partialArgs?.path || '';
+  let displayPath = '';
+  if (filePath) {
+    const { base, dir } = path.parse(filePath);
+    const parentDir = path.basename(dir);
+    displayPath = parentDir ? `${parentDir}/${base}` : base;
+  }
+
+  // During argument streaming
+  if (isArgumentsStreaming) {
+    if (!displayPath)
+      return (
+        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-local-system.apiName.readLocalFile')}</span>
+        </div>
+      );
+
+    return (
+      <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-local-system.apiName.readLocalFile')}: </span>
+        <span className={highlightTextStyles.primary}>{displayPath}</span>
+      </div>
+    );
+  }
+
+  // Check if file was read successfully (has content)
+  const hasContent = !!pluginState?.fileContent;
+
+  return (
+    <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
+      <span style={{ marginInlineStart: 2 }}>
+        <span>{t('builtins.lobe-local-system.apiName.readLocalFile')}: </span>
+        {displayPath && <span className={highlightTextStyles.primary}>{displayPath}</span>}
+        {isLoading ? null : pluginState ? (
+          hasContent ? (
+            <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+          ) : (
+            <X className={styles.statusIcon} color={cssVar.colorError} size={14} />
+          )
+        ) : null}
+      </span>
+    </div>
+  );
+});
+
+ReadLocalFileInspector.displayName = 'ReadLocalFileInspector';

package/packages/builtin-tool-local-system/src/client/Inspector/RunCommand/index.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { type RunCommandParams, type RunCommandResult } from '@lobechat/electron-client-ipc';
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check, X } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  root: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    color: ${cssVar.colorTextSecondary};
+  `,
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+interface RunCommandState {
+  message: string;
+  result: RunCommandResult;
+}
+
+export const RunCommandInspector = memo<BuiltinInspectorProps<RunCommandParams, RunCommandState>>(
+  ({ args, partialArgs, isArgumentsStreaming, pluginState, isLoading }) => {
+    const { t } = useTranslation('plugin');
+
+    // Show description if available, otherwise show command
+    const description = args?.description || partialArgs?.description || args?.command || '';
+
+    // During argument streaming
+    if (isArgumentsStreaming) {
+      if (!description)
+        return (
+          <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+            <span>{t('builtins.lobe-local-system.apiName.runCommand')}</span>
+          </div>
+        );
+
+      return (
+        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-local-system.apiName.runCommand')}: </span>
+          <span className={highlightTextStyles.primary}>{description}</span>
+        </div>
+      );
+    }
+
+    // Get execution result from pluginState
+    const result = pluginState?.result;
+    const isSuccess = result?.success && result?.exit_code === 0;
+
+    return (
+      <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
+        <span style={{ marginInlineStart: 2 }}>
+          <span>{t('builtins.lobe-local-system.apiName.runCommand')}: </span>
+          {description && <span className={highlightTextStyles.primary}>{description}</span>}
+          {isLoading ? null : result?.success !== undefined ? (
+            isSuccess ? (
+              <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+            ) : (
+              <X className={styles.statusIcon} color={cssVar.colorError} size={14} />
+            )
+          ) : null}
+        </span>
+      </div>
+    );
+  },
+);
+
+RunCommandInspector.displayName = 'RunCommandInspector';
+
+export default RunCommandInspector;

package/packages/builtin-tool-local-system/src/client/Inspector/SearchLocalFiles/index.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { type LocalSearchFilesParams } from '@lobechat/electron-client-ipc';
+import { type BuiltinInspectorProps } from '@lobechat/types';
+import { createStaticStyles, cssVar, cx } from 'antd-style';
+import { Check } from 'lucide-react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { highlightTextStyles, shinyTextStyles } from '@/styles';
+
+import { type LocalFileSearchState } from '../../..';
+
+const styles = createStaticStyles(({ css, cssVar }) => ({
+  root: css`
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+
+    color: ${cssVar.colorTextSecondary};
+  `,
+  statusIcon: css`
+    margin-block-end: -2px;
+    margin-inline-start: 4px;
+  `,
+}));
+
+export const SearchLocalFilesInspector = memo<
+  BuiltinInspectorProps<LocalSearchFilesParams, LocalFileSearchState>
+>(({ args, partialArgs, isArgumentsStreaming, pluginState, isLoading }) => {
+  const { t } = useTranslation('plugin');
+
+  const keywords = args?.keywords || partialArgs?.keywords || '';
+
+  // During argument streaming
+  if (isArgumentsStreaming) {
+    if (!keywords)
+      return (
+        <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+          <span>{t('builtins.lobe-local-system.apiName.searchLocalFiles')}</span>
+        </div>
+      );
+
+    return (
+      <div className={cx(styles.root, shinyTextStyles.shinyText)}>
+        <span>{t('builtins.lobe-local-system.apiName.searchLocalFiles')}: </span>
+        <span className={highlightTextStyles.primary}>{keywords}</span>
+      </div>
+    );
+  }
+
+  // Check if search returned results
+  const hasResults = pluginState?.searchResults && pluginState.searchResults.length >= 0;
+
+  return (
+    <div className={cx(styles.root, isLoading && shinyTextStyles.shinyText)}>
+      <span style={{ marginInlineStart: 2 }}>
+        <span>{t('builtins.lobe-local-system.apiName.searchLocalFiles')}: </span>
+        {keywords && <span className={highlightTextStyles.primary}>{keywords}</span>}
+        {isLoading ? null : pluginState?.searchResults ? (
+          hasResults ? (
+            <Check className={styles.statusIcon} color={cssVar.colorSuccess} size={14} />
+          ) : null
+        ) : null}
+      </span>
+    </div>
+  );
+});
+
+SearchLocalFilesInspector.displayName = 'SearchLocalFilesInspector';

package/{src/tools/local-system → packages/builtin-tool-local-system/src/client}/Inspector/index.ts

@@ -1,5 +1,4 @@
-import { LocalSystemApiName } from '@lobechat/builtin-tool-local-system';
-
+import { LocalSystemApiName } from '../..';
 import { EditLocalFileInspector } from './EditLocalFile';
 import { GlobLocalFilesInspector } from './GlobLocalFiles';
 import { GrepContentInspector } from './GrepContent';

package/{src/tools/local-system → packages/builtin-tool-local-system/src/client}/Intervention/index.ts

@@ -1,5 +1,4 @@
-import { LocalSystemApiName } from '@lobechat/builtin-tool-local-system';
-
+import { LocalSystemApiName } from '../..';
 import EditLocalFile from './EditLocalFile';
 import MoveLocalFiles from './MoveLocalFiles';
 import RunCommand from './RunCommand';

package/{src/tools/local-system → packages/builtin-tool-local-system/src/client}/Render/ListFiles/Result.tsx

@@ -5,7 +5,8 @@ import { memo } from 'react';
 
 import { useChatStore } from '@/store/chat';
 import { chatToolSelectors } from '@/store/chat/selectors';
-import FileItem from '@/tools/local-system/components/FileItem';
+
+import FileItem from '../../components/FileItem';
 
 interface SearchFilesProps {
   listResults?: LocalFileItem[];

package/{src/tools/local-system → packages/builtin-tool-local-system/src/client}/Render/index.ts

@@ -1,5 +1,4 @@
-import { LocalSystemApiName } from '@lobechat/builtin-tool-local-system';
-
+import { LocalSystemApiName } from '../..';
 import EditLocalFile from './EditLocalFile';
 import ListFiles from './ListFiles';
 import MoveLocalFiles from './MoveLocalFiles';

package/{src/tools/local-system → packages/builtin-tool-local-system/src/client}/Streaming/index.ts

@@ -1,5 +1,4 @@
-import { LocalSystemApiName } from '@lobechat/builtin-tool-local-system';
-
+import { LocalSystemApiName } from '../..';
 import { RunCommandStreaming } from './RunCommand';
 
 /**

package/packages/builtin-tool-local-system/src/client/index.ts

@@ -0,0 +1,20 @@
+// Inspector components (customized tool call headers)
+export { LocalSystemInspectors } from './Inspector';
+
+// Render components (read-only snapshots)
+export { LocalSystemRenders } from './Render';
+
+// Intervention components (approval dialogs)
+export { LocalSystemInterventions } from './Intervention';
+
+// Streaming components
+export { LocalSystemStreamings } from './Streaming';
+
+// Placeholder components
+export { ListFiles as LocalSystemListFilesPlaceholder } from './Placeholder/ListFiles';
+export { default as LocalSystemSearchFilesPlaceholder } from './Placeholder/SearchFiles';
+
+// Re-export types and manifest for convenience
+export { LocalSystemManifest } from '../manifest';
+export { LocalSystemIdentifier } from '../types';
+export * from '../types';

package/src/app/[variants]/(main)/chat/_layout/Sidebar/Topic/index.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { AccordionItem, ActionIcon, Dropdown, Flexbox, Text } from '@lobehub/ui';
-import { Loader2Icon } from 'lucide-react';
+import { AccordionItem, Dropdown, Flexbox, Text } from '@lobehub/ui';
 import React, { Suspense, memo } from 'react';
 import { useTranslation } from 'react-i18next';
 
+import NeuralNetworkLoading from '@/components/NeuralNetworkLoading';
 import SkeletonList from '@/features/NavPanel/components/SkeletonList';
 import { useFetchTopics } from '@/hooks/useFetchTopics';
 import { useChatStore } from '@/store/chat';
@@ -45,7 +45,7 @@ const Topic = memo<TopicProps>(({ itemKey }) => {
           <Text ellipsis fontSize={12} type={'secondary'} weight={500}>
             {`${t('title')} ${topicCount > 0 ? topicCount : ''}`}
           </Text>
-          {isRevalidating && <ActionIcon icon={Loader2Icon} loading size={'small'} />}
+          {isRevalidating && <NeuralNetworkLoading size={14} />}
         </Flexbox>
       }
     >