feat: add loading state for counts display in search results

2025-06-03 18:27:41 +08:00
parent eddedfdf1b
commit b6a23d69d6
5 changed files with 8 additions and 3 deletions
@@ -1534,6 +1534,7 @@ ui:
    follow: Follow
    following: Following
    counts: "{{count}} Results"
+    counts_loading: "... Results"
    more: More
    sort_btns:
      relevance: Relevance
@@ -1501,6 +1501,7 @@ ui:
    follow: 关注
    following: 已关注
    counts: "{{count}} 个结果"
+    counts_loading: "... 个结果"
    more: 更多
    sort_btns:
      relevance: 相关性
@@ -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}`;
  }

@@ -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}
@@ -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 />