feat: add loading state for counts display in search results

sy-records · shuashuai · commit b6a23d69d641 · 2025-06-09T10:49:07.000+08:00
diff --git a/i18n/en_US.yaml b/i18n/en_US.yaml
@@ -1534,6 +1534,7 @@ ui:
     follow: Follow
     following: Following
     counts: "{{count}} Results"
+    counts_loading: "... Results"
     more: More
     sort_btns:
       relevance: Relevance
diff --git a/i18n/zh_CN.yaml b/i18n/zh_CN.yaml
@@ -1501,6 +1501,7 @@ ui:
     follow: 关注
     following: 已关注
     counts: "{{count}} 个结果"
+    counts_loading: "... 个结果"
     more: 更多
     sort_btns:
       relevance: 相关性
diff --git a/ui/src/components/Header/index.tsx b/ui/src/components/Header/index.tsx
@@ -87,7 +87,6 @@ const Header: FC = () => {
   if (theme_config?.[theme]?.navbar_style) {
     // const color = theme_config[theme].navbar_style.startsWith('#')
     themeMode = isLight(theme_config[theme].navbar_style) ? 'light' : 'dark';
-    console.log('isLightTheme', themeMode);
     navbarStyle = `theme-${themeMode}`;
   }
 
diff --git a/ui/src/pages/Search/components/SearchHead/index.tsx b/ui/src/pages/Search/components/SearchHead/index.tsx
@@ -35,7 +35,11 @@ const Index: FC<Props> = ({ sort, count = 0 }) => {
 
   return (
     <div className="d-flex flex-wrap align-items-center justify-content-between pt-2 pb-3">
-      <h5 className="mb-0">{t('counts', { count, keyPrefix: 'search' })}</h5>
+      <h5 className="mb-0">
+        {count === -1
+          ? t('counts_loading', { keyPrefix: 'search' })
+          : t('counts', { count, keyPrefix: 'search' })}
+      </h5>
       <QueryGroup
         data={sortBtns}
         currentSort={sort}
diff --git a/ui/src/pages/Search/index.tsx b/ui/src/pages/Search/index.tsx
@@ -106,7 +106,7 @@ const Index = () => {
     <Row className="pt-4 mb-5">
       <Col className="page-main flex-auto">
         <Head data={extra} />
-        <SearchHead sort={order} count={count} />
+        <SearchHead sort={order} count={isLoading ? -1 : count} />
         <ListGroup className="rounded-0 mb-5">
           {isSkeletonShow ? (
             <ListLoader />

Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,6 @@ const Header: FC = () => {`
`87`	`87`	`if (theme_config?.[theme]?.navbar_style) {`
`88`	`88`	`// const color = theme_config[theme].navbar_style.startsWith('#')`
`89`	`89`	`themeMode = isLight(theme_config[theme].navbar_style) ? 'light' : 'dark';`
`90`		`- console.log('isLightTheme', themeMode);`
`91`	`90`	navbarStyle = `theme-${themeMode}`;
`92`	`91`	`}`
`93`	`92`