Icon is not animating correctly

Environment

• Operating System: Darwin
• Node Version: v23.7.0
• Nuxt Version: 3.15.4
• CLI Version: 3.21.1
• Nitro Version: 2.10.4
• Package Manager: bun@1.2.2
• Builder: -
• User Config: extends, modules, devtools, runtimeConfig, future, compatibilityDate, site, hub, auth, content, image, eslint, css, colorMode
• Runtime Modules: @nuxtjs/seo@2.1.1, @nuxt/image@1.9.0, @nuxt/ui-pro@3.0.0-alpha.13, @nuxt/content@3.1.1, @nuxthub/core@0.8.17, @nuxt/eslint@0.7.6, nuxt-auth-utils@0.5.15, nuxt-medusa@1.0.0, nuxt-particles@0.3.0, motion-v/nuxt@0.10.0
• Build Modules: -

Version

v3.0.0-alpha.12

Reproduction

Jusy load the animated icon anywhere in a page.

For example:

<Icon name="line-md:loading-twotone-loop" />

Description

The issue occurs both when I run the app in development mode and when I build it for production. I tested it on Safari (Mac and iPhone) and Chrome (iPhone only). On the first page load, the animation works fine, but when I reload the page, the animation stops. However, when the component where it is used updates, the icon state changes (still without animation).

Here I placed some icons randomly in the pages to show the problem and when it occurs:

https://github.com/user-attachments/assets/ca9772d8-61bb-47da-9b9e-38cbb8d5796c

).

Start by reproducing the issue with the example in both development and production builds, focusing on the initial page load and reload behavior. Trace the Icon component's handling of animated icons and verify that the animation continues after a reload in Safari and Chrome on the reported environments.