refactor: refactor Drawer loading

[li-jia-nan]

中文版模板 / 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

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

[github-actions]

👁 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.css-var.png
progress-info-position.dark.png	progress-info-position.dark.css-var.png
progress-info-position.default.png	progress-info-position.default.css-var.png

Check Full Report for details

[github-actions]

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 🔽)

[codesandbox-ci]

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]

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.

[li-jia-nan]

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>

[codecov]

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.

[zombieJ]

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.