Skip to content
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.

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

refactor: refactor Drawer loading #48886

Merged
merged 5 commits into from
May 14, 2024
Merged

refactor: refactor Drawer loading #48886

merged 5 commits into from
May 14, 2024

Conversation

li-jia-nan
Copy link
Member

@li-jia-nan li-jia-nan commented May 12, 2024

中文版模板 / Chinese template

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English refactor: refactor Drawer loading
🇨🇳 Chinese 重构 Drawer 组件的 loading 状态,将 Spin 替换为 Skeleton,和 Modal 组件保持一致

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

Copy link

stackblitz bot commented May 12, 2024

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

Copy link
Contributor

github-actions bot commented May 12, 2024

Preview is ready

Copy link
Contributor

github-actions bot commented May 12, 2024

👁 Visual Regression Report for PR #48886 Failed ❌

🎯 Target branch: feature (b49f70f)
📖 View Full Report ↗︎

Expected (Branch feature) Actual (Current PR) Diff
progress-info-position.compact.png progress-info-position.compact.png progress-info-position.compact.css-var.png progress-info-position.compact.css-var.png
progress-info-position.dark.png progress-info-position.dark.png progress-info-position.dark.css-var.png progress-info-position.dark.css-var.png
progress-info-position.default.png progress-info-position.default.png progress-info-position.default.css-var.png progress-info-position.default.css-var.png

Check Full Report for details

Copy link
Contributor

github-actions bot commented May 12, 2024

size-limit report 📦

Path Size
./dist/antd.min.js 337.8 KB (-188 B 🔽)
./dist/antd-with-locales.min.js 385.6 KB (-118 B 🔽)

Copy link

codesandbox-ci bot commented May 12, 2024

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

@Enigama
Copy link
Contributor

Enigama commented May 12, 2024

It might be not user friendly to have header while loading is true, for instance: drawer gets title and content from the server and while we are waiting for response from server we would see header without title and with [x] button.
image

@li-jia-nan
Copy link
Member Author

li-jia-nan commented May 12, 2024

It might be not user friendly to have header while loading is true, for instance: drawer gets title and content from the server and while we are waiting for response from server we would see header without title and with [x] button

I think this is the expected behavior, and I support the loading prop of the Modal component in #48848. The Drawer should be consistent with the behavior of Modal components. If you don't need header, You can customize the header:

<Drawer
  open={open}
  loading={isLoading}
  closable={!isLoading}
  title={isLoading? null : <span>Loading Drawer</span>}
>
  <p>Some contents...</p>
  <p>Some contents...</p>
  <p>Some contents...</p>
</Drawer>

Copy link

codecov bot commented May 12, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (b49f70f) to head (60ebe22).

Additional details and impacted files
@@            Coverage Diff            @@
##           feature    #48886   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          746       746           
  Lines        13014     13010    -4     
  Branches      3426      3425    -1     
=========================================
- Hits         13014     13010    -4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@li-jia-nan li-jia-nan changed the title refactor: adjust Drawer loading area not include header area refactor: refactor Drawer loading May 13, 2024
@li-jia-nan li-jia-nan merged commit 0836497 into feature May 14, 2024
102 of 103 checks passed
@li-jia-nan li-jia-nan deleted the drawer-Spin-header branch May 14, 2024 06:15
@zombieJ
Copy link
Member

zombieJ commented May 14, 2024

It might be not user friendly to have header while loading is ...

In most case, Title is no need to load by async. But yes, it can still use spin as loading if needed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants