Skip to content

feat(list): add Spin overlay for loading and use Empty.PRESENTED_IMAGE_SIMPLE #9511

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
chenshuai2144 merged 1 commit into from
Feb 26, 2026
Merged

feat(list): add Spin overlay for loading and use Empty.PRESENTED_IMAGE_SIMPLE #9511

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions src/list/ProListBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* 内部 List 容器与 List.Item / List.Item.Meta 实现，用于替代 antd List（antd List 已停止维护）
* 保持与 antd List 相同的 DOM 结构及类名，以便复用 antd 的 list 样式
*/
import { ConfigProvider, Empty, Grid, Pagination } from 'antd';
import { ConfigProvider, Empty, Grid, Pagination, Spin } from 'antd';
import type { PaginationConfig } from 'antd/lib/pagination';
import { clsx } from 'clsx';
import React, { useContext, useMemo } from 'react';
Expand Down Expand Up @@ -445,7 +445,7 @@ const ProListContainerInner = React.forwardRef<HTMLDivElement, ListProps<any>>(
} else if (!children && !isLoading) {
const emptyContent = locale?.emptyText ??
(typeof renderEmpty === 'function' ? renderEmpty('List') : null) ?? (
<Empty description="暂无数据" />
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
);
childrenContent = (
<div className={`${prefixCls}-empty-text`}>{emptyContent}</div>
Expand Down Expand Up @@ -508,13 +508,15 @@ const ProListContainerInner = React.forwardRef<HTMLDivElement, ListProps<any>>(
return (
<ProListContext.Provider value={contextValue}>
<div ref={ref} style={style} className={classString} {...rest}>
{showPaginationTop && paginationNode}
{header && <div className={`${prefixCls}-header`}>{header}</div>}
{childrenContent}
{children}
{footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
{loadMore}
{showPaginationBottom && paginationNode}
<Spin spinning={isLoading}>
{showPaginationTop && paginationNode}
{header && <div className={`${prefixCls}-header`}>{header}</div>}
{childrenContent}
{children}
{footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
{loadMore}
{showPaginationBottom && paginationNode}
</Spin>
Comment on lines +511 to +519
Copy link
Contributor

@gemini-code-assist gemini-code-assist bot Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

This change to use <Spin> for loading is a good one. However, it interacts with some existing logic in ways that might be unintended. There are two issues to consider:

  1. Loading overlay behavior: The spinner won't function as a true overlay on stale data. This is because when isLoading is true, the list's content (childrenContent) is replaced by a placeholder div (see lines 453-454). This causes the list to appear empty during loading, rather than showing the spinner over the old content. For a better user experience, you might want to remove that logic so the spinner overlays the stale data.

  2. Duplicate rendering of children: There's a pre-existing bug where children can be rendered twice. This happens when dataSource is empty but children are provided. The logic at line 456 sets childrenContent = children, and then both are rendered within the <Spin> component, causing duplication. This should be addressed by refactoring the childrenContent logic.

Both issues are related to how childrenContent is determined outside of this changed block. I'd recommend addressing them for this feature to work correctly and to fix the underlying bug.

Comment on lines +511 to +519
Copy link

@coderabbitai coderabbitai bot Feb 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

cat -n src/list/ProListBase.tsx | sed -n '450,520p'

Repository: ant-design/pro-components

Length of output: 2909

🏁 Script executed:

cat -n src/list/ProListBase.tsx | sed -n '430,460p'

Repository: ant-design/pro-components

Length of output: 1286

🏁 Script executed:

cat -n src/list/ProListBase.tsx | sed -n '505,525p' && echo "---" && rg -n "children" src/list/ProListBase.tsx | grep -E "(line 515|{children})" | head -20

Repository: ant-design/pro-components

Length of output: 991

🏁 Script executed:

cat -n src/list/ProListBase.tsx | sed -n '155,175p'

Repository: ant-design/pro-components

Length of output: 782

🏁 Script executed:

# Check for any comments around line 515 or in the broader render section
cat -n src/list/ProListBase.tsx | sed -n '500,525p' | grep -i "comment\|todo\|fixme\|hack\|bug" || echo "No comments found in render section"

# Also check the git history of this line to see if there's context
git log --oneline -p src/list/ProListBase.tsx 2>/dev/null | grep -A10 -B10 "children}" | head -50 || echo "Git history not available"

Repository: ant-design/pro-components

Length of output: 1534

在特定条件下 children 被重复渲染。

当 splitDataSource 为空、存在 children 且非加载状态时，第 456 行将 childrenContent 赋值为 children。此时第 514 行 {childrenContent} 和第 515 行 {children} 会导致 children 被渲染两次。此外，第 515 行的独立渲染在其他条件分支中也显得冗余。

🐛 建议移除重复的 children 渲染 
          <Spin spinning={isLoading}>
            {showPaginationTop && paginationNode}
            {header && <div className={`${prefixCls}-header`}>{header}</div>}
            {childrenContent}
-            {children}
            {footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
            {loadMore}
            {showPaginationBottom && paginationNode}
          </Spin>
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<Spin spinning={isLoading}>
{showPaginationTop && paginationNode}
{header && <div className={`${prefixCls}-header`}>{header}</div>}
{childrenContent}
{children}
{footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
{loadMore}
{showPaginationBottom && paginationNode}
</Spin>
<Spin spinning={isLoading}>
{showPaginationTop && paginationNode}
{header && <div className={`${prefixCls}-header`}>{header}</div>}
{childrenContent}
{footer && <div className={`${prefixCls}-footer`}>{footer}</div>}
{loadMore}
{showPaginationBottom && paginationNode}
</Spin>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@src/list/ProListBase.tsx` around lines 511 - 519, The code currently renders
children twice because when splitDataSource is empty you assign childrenContent
= children and then render both {childrenContent} and {children}; remove the
redundant standalone {children} render in the JSX inside the Spin so only
{childrenContent} is rendered (ensure childrenContent logic still falls back to
children when appropriate), referencing childrenContent, children,
splitDataSource and isLoading to locate and verify the fix.

</div>
</ProListContext.Provider>
);
Expand Down
Loading