Icon is not animating correctly
Nobody has claimed this yet.
Assessment
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Newbie friendliness
- 42/100
- Issue type
- Bug
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- nuxt, typescript
- Domain
- frontend
Research direction
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.
Written by the indexing model from the issue text.
Description
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: [email protected]
- Builder: -
- User Config: extends, modules, devtools, runtimeConfig, future, compatibilityDate, site, hub, auth, content, image, eslint, css, colorMode
- Runtime Modules: @nuxtjs/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxt/[email protected], @nuxthub/[email protected], @nuxt/[email protected], [email protected], [email protected], [email protected], motion-v/[email protected]
- 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
).
- Dominant language
- TypeScript
- Stars
- 1.2k
- Forks
- 97
- PR merge metrics
- No merged PRs in 30d
Getting set up
- No Dockerfile or Docker Compose file
- No pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from nuxt/icon
-
Difficulty 2/5 1-3 hours Newbie friendliness 55/100
-
Allow separate providers for SSR and client (`provider: { server, client }`)Possibly taken @pont1s claimed this 24 days ago. Open
Difficulty 5/5 Over a week Newbie friendliness 45/100
-
Difficulty 3/5 1-2 days Newbie friendliness 65/100
-
Remote server bundle duplicates concurrent collection downloadsPossibly taken @onmax claimed this 47 days ago. Open
Difficulty 3/5 1-2 days Newbie friendliness 68/100
-
Difficulty 3/5 1-2 days Newbie friendliness 42/100
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
paperclipai/paperclip#17151 ·
Maintainers usually reply within 1 day
-
needs-triage
Difficulty 2/5 1-3 hours Newbie friendliness 83/100
AgoraIO-Extensions/agent-infra#3159 ·
Maintainers usually reply within 1 day
-
blocklist addition
Difficulty 1/5 Under an hour Newbie friendliness 66/100
MetaMask/eth-phishing-detect#304596 ·
Maintainers usually reply within 1 day
-
friction
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
kentcdodds/kody#4142 ·
-
[Bug] Statistics | Task statistics are always empty on MikroORM with MySQL or SQLitePossibly taken @NdekoCode claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
ever-co/ever-gauzy#11214 ·
Maintainers usually reply within 1 day