feat: Drawer add loading prop to show spinner

[Enigama]

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

It would be nice to have loading prop, it will solve some issue when async data loads in drawer and we don't want to show drawer without title or some body parts.

☑️ 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 #48563 Failed ❌

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

Expected (Branch feature)	Actual (Current PR)	Diff
	drawer-loading.compact.css-var.png	🆕🆕🆕 Added 🆕🆕🆕
	drawer-loading.compact.png	🆕🆕🆕 Added 🆕🆕🆕
	drawer-loading.dark.css-var.png	🆕🆕🆕 Added 🆕🆕🆕
	drawer-loading.dark.png	🆕🆕🆕 Added 🆕🆕🆕
	drawer-loading.default.css-var.png	🆕🆕🆕 Added 🆕🆕🆕
	drawer-loading.default.png	🆕🆕🆕 Added 🆕🆕🆕

Check Full Report for details

[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]

@yoyo837 @afc163

[Enigama]

@yoyo837 @afc163 I think over comment that we should prevent to show drawer content while loading here is my thought how to do it, maybe you have some suggestion?

if (spinProps?.spinning) {
    return (
      <Spin
        spinning={false}
        style={{
          height: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
        {...spinProps}
      />
    );
  }

  return (
    <>
      {headerNode}
      <div
        className={classNames(
          `${prefixCls}-body`,
          drawerClassNames?.body,
          drawerContext?.classNames?.body,
        )}
        style={{
          ...drawerContext?.styles?.body,
          ...bodyStyle,
          ...drawerStyles?.body,
        }}
      >
        {children}
      </div>
      {footerNode}
    </>
  );

However when I tried to run this example I came up with warning for tip property since it could be only for full screen or nested spin which is not our case. So I have to Omit tip prop as well as i did for full screen

[Enigama]

@yoyo837 @afc163 @zombieJ what your thoughts?

[Enigama]

Is it ok that regression and tests are failed?

[afc163]

CI failed: https://github.com/ant-design/ant-design/actions/runs/8781495679/job/24093945327?pr=48563

[Enigama]

Irrelevant.
@yoyo837 @afc163 I see that ci failed on demo-extend.test.tsx which use original rc-drawer where we do not have loading statement and there fore snapshot has differences, what should i do, add conditional rendering in rc-drawer as well as we have in ant-drawer?
Like:

[Enigama]

Irrelevant.
@yoyo837 @afc163 Should I add loading to original component rc-drawer because I think it would fix test?

[github-actions]

Hi @Enigama. Thanks for your contribution. The path .github/ or scripts/ and CHANGELOG is only maintained by team members. This current PR will be closed and team members will help on this.

[Enigama]

😭

[Enigama]

I've done the command: npm run test:site-update which was suggested by the failed e2e test in gh action, did I something wrong? Should I reopen pr but without check-site.ts.snap updates?

[Enigama]

@MadCcc @afc163 @yoyo837 @zombieJ what should I do?

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (ba5f9fe) to head (6a92483).

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #48563   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          745       745           
  Lines        12981     12987    +6     
  Branches      3403      3406    +3     
=========================================
+ Hits         12981     12987    +6     

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

[Enigama]

@MadCcc @afc163 @yoyo837 @zombieJ I see that check test / test (18, dom, 1/2) (pull_request) has failed but it doesn't concern to my changes(I guess), can you guys check the RP and if it's fine than approve it, if it's not, please give me detailed message it would help me to fix it a way more faster. Thanks.

[yoyo837]

React recently released 18.3.0, Thye CI needs to be adjusted, please wait #48640.

[Enigama]

#48661

[Enigama]

@yoyo837 Can we merge it?

[Enigama]

@yoyo837 I see that e2e has failed, I locally ran the command to update snap test:site-update it's again in scripts folder, should i commit it? Or it's fine?

[Enigama]

@yoyo837 @afc163 @zombieJ @MadCcc All check are passed, can it be merged?

[github-actions]

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。