docs: don't animate pixel loader when not in view

[yihuiliao]

Closes

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices
• I understand every change in this PR and can explain why it's there.
• If AI-assisted, I followed our AI contribution guidance and pointed my assistant at CLAUDE.md.

📝 Test Instructions:

Go to ai components doc page, open chrome's task manager and compare it with the ai component doc page on prod. the cpu should be lower when you are not over the pixel loader section.

🧢 Your Project:

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[devongovett]

What do you think about putting this in the PixelLoader component itself rather than something that would need to be copy and pasted from the docs? That would also have the benefit that if you scrolled the response status out of view in the chat it would automatically pause to reduce cpu consumption.

[yihuiliao]

hmm good point, i'll take a look

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[devongovett]

nice seems to work. one tiny detail is that the setInterval and the animation can get out of sync because the animation is paused mid-cycle and resumes when it comes back into view, whereas the interval re-starts from the beginning. you can sort of see it as an extra delay between icons. they will re-sync on the next iteration though so not too big a deal.

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Agent Skills Changes

Modified (9)

• react-aria/agent-skills/index.json $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/agent-skills/react-aria.tar.gz
• react-aria/agent-skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/index.json $\color{green}{+3}$ $\color{red}{-3}$
• s2/agent-skills/migrate-react-spectrum-v3-to-s2.tar.gz
• s2/agent-skills/react-spectrum-s2.tar.gz
• s2/agent-skills/react-spectrum-s2/references/guides/ai-components.md $\color{green}{+5}$ $\color{red}{-20}$
• s2/agent-skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/spectrum-audit.tar.gz

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/1f84d8d2f4c4f0ef84718a808ef5bb360420094b/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/1f84d8d2f4c4f0ef84718a808ef5bb360420094b/