Preloader CSS animation on Lazy module causing heavy CPU usage

[aynzad]

Check that this is really a bug

• [X] I confirm

Reproduction link

https://swiper-lazy-load-images-react-heavy-cpu-usage.vercel.app/

https://github.com/aynzad/swiper-lazy-load-images-react-heavy-cpu-usage

Bug description

When Swiper with Lazy Images module is used, CPU usage is always high on the page even when there is no activity.

There will be a major issue when a page contains a lot of sliders using Swiper with lazy images that are using a lot of CPU power (in Chrome's Task Manager) and Style recalcs / sec, even when there is no activity.

Expected Behavior

On basic usage like pagination and scrolling, CPU usage and Style recalcs / sec should not be noticeable heavy. On idle (no activity) there should be minimum CPU usage with zero Style recalcs / sec

Actual Behavior

On basic usage like pagination and scrolling, CPU usage and Style recalcs / sec are noticeable heavy. On idle (no activity) there is heavy CPU usage with continuously changing Style recalcs / sec

Swiper version

7.2.0

Platform/Target and Browser Versions

macOS 12.0.1, Chrome 92.0.45, Safari 15.1

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
• [X] Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

• [X] I'm willing to open a PR

[aynzad]

Possibility related to this old issue https://github.com/nolimits4web/Swiper/issues/1451

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nolimits4web]

Swiper v9 doesn't lazy module anymore. If you have similar issues in Swiper 9, open a new issue with a CodeSandbox showing the issue.