[Bug]: Skeleton not showing animation

[nicoleweese]

Component

Skeleton

Package version

9.54.13

React version

18.3.1

Environment

System:
OS: Windows 11 10.0.22631
CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
Memory: 42.93 GB / 63.95 GB
Browsers:
Edge: Chromium (129.0.2792.65)
Internet Explorer: 11.0.22621.3527

Current Behavior

return ( <div className={classNames.essentialsItem}> <div className={mergeClasses(classNames.essentialsNoWrap, classNames.essentialsLabel)}>{label}</div> <div className={mergeClasses(classNames.essentialsNoWrap, classNames.essentialsDivider)}>:</div> <div aria-busy={!value} aria-label={${labelAria} ${valueAria}} className={mergeClasses(classNames.essentialsNoWrap, classNames.essentialsValueContainer)} > {!value ? ( // TODO: is not "shimmering" <Skeleton animation="wave"> <SkeletonItem animation="wave" /> </Skeleton> ) : ( FieldValueContent )} </div> </div> );

When loading the SkeletonItem, I don't see any wave or pulse regardless of whether I specify animation or not. Even when rendering the Skeleton without allowing it to update to actual content, the animations never show up.

Expected Behavior

I am expecting the wave animation to show by default, and the pulse animation to show when specified.

Reproduction

https://stackblitz.com/edit/cieedh?file=src%2Fexample.tsx

Steps to reproduce

I don't see it reproducing in stackblitz.

Are you reporting an Accessibility issue?

no

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[WanderG]

Did you check if animations are enabled in your windows settings? (Accessibility => Visual effects => Animation effects)

[nicoleweese]

That fixed it. Thank you :)

…

On Fri, Oct 18, 2024 at 12:47 AM Wander ***@***.***> wrote: Did you check if animations are enabled in your windows settings? (Accessibility => Visual effects => Animation effects) — Reply to this email directly, view it on GitHub <#33076 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AHV3KF6GYPXBFBAN65YJ63DZ4C4IZAVCNFSM6AAAAABQELQG4WVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDIMRRGY4TCMZRGE> . You are receiving this because you authored the thread.Message ID: ***@***.***>