feat(Loader): add paused value to the speed property to control the animation pause

[jpranays]

Description

This PR introduces a new loaderPlayState prop for the Loader spinner component. The loaderPlayState prop accepts two values: "running" and "paused", allowing users to control the play state of the loader animation.

Use Cases

1. Pause and Resume: In applications with complex loading sequences, it might be necessary to pause the loader animation while certain conditions are being met and resume it afterward.
2. Accessibility: Users might want to pause animations to reduce distractions or for accessibility reasons.
3. User Experience: Provide better user experience by controlling the visibility and behavior of the loader based on user interactions.

Implementation Details

• Added a new loaderPlayState prop to the Loader component, which defaults to "running".
• Updated the CSS/JS to handle the "running" and "paused" states appropriately.
• Ensured backward compatibility by setting the default value to "running" so existing implementations are not affected.

Code Example

// Usage Example
<Loader loaderPlayState="paused" />

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rsuite-nextjs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2024 5:58am
rsuite-storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 10, 2024 5:58am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
rsuite-v4	⬜️ Ignored (Inspect)	Visit Preview		Jul 10, 2024 5:58am

[vercel]

Someone is attempting to deploy a commit to the rsuite Team on Vercel.

A member of the Team first needs to authorize it.

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

[simonguo]

Hi @jpranays

I suggest adding a paused value to the speed prop to indicate the paused state of the loader.

// speed:  'fast' | 'normal' | 'slow' | 'paused'
<Loader speed="paused" />

[jpranays]

Great idea! I’ll add paused to the speed prop.

[simonguo]

Great idea! I’ll add paused to the speed prop.

Also, remember to add a test case for this to ensure it works as expected.
https://github.com/rsuite/rsuite/blob/main/src/Loader/test/LoaderSpec.tsx#L36

[jpranays]

Great idea! I’ll add paused to the speed prop.

Also, remember to add a test case for this to ensure it works as expected. https://github.com/rsuite/rsuite/blob/main/src/Loader/test/LoaderSpec.tsx#L36

PR updated

[simonguo]

Jietu20240710-121558-HD.mp4

The paused value doesn't work, check your CSS specificity. You can add an example to the docs to preview it.

https://github.com/rsuite/rsuite/blob/main/docs/pages/components/loader/fragments/speed.md

And the documentation needs to be modified.
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/loader/en-US/index.md#loader-1
https://github.com/rsuite/rsuite/blob/main/docs/pages/components/loader/zh-CN/index.md#loader

[simonguo]

Not working
https://rsuite-nextjs-git-fork-jpranays-main-rsuite.vercel.app/components/loader/#speed

[jpranays]

Jietu20240710-121558-HD.mp4
The paused value doesn't work, check your CSS specificity. You can add an example to the docs to preview it.

https://github.com/rsuite/rsuite/blob/main/docs/pages/components/loader/fragments/speed.md

And the documentation needs to be modified. https://github.com/rsuite/rsuite/blob/main/docs/pages/components/loader/en-US/index.md#loader-1 https://github.com/rsuite/rsuite/blob/main/docs/pages/components/loader/zh-CN/index.md#loader

Seems strange, works fine for me,

Rsuite-loader-doc.mp4

Rsuite-loader-storybook.mp4

Docs have been updated

[jpranays]

Not working https://rsuite-nextjs-git-fork-jpranays-main-rsuite.vercel.app/components/loader/#speed

Rsuite-loader-latest-doc.mp4

[simonguo]

It works now. It didn't work before because of browser cache.