fix(icons): update loading icon

[alectrocute]

🔗 Linked issue

#4162

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Currently, we're using the incorrect icon to indicate a loading state. Lucide has icons that are meant to be animated/moved (called "cursors") and both loading-related Lucide icons used in Nuxt UI are not among them. 😅

As a result, these icons (refresh-cw or i-lucide-repeat-2) have always looked sorta... offish. They painfully embody the spirit of a square wagon wheel and in such a beautiful UI library, looks horribly out of place. It got some attention in #2797, which helped but was only a half measure.

This PR corrects this UI mistake and puts our best foot forward by replacing all instances with the correct icon, Lucide's loader-circle. It's designed to be rotationally animated and looks beautiful when doing so.

Also, we need to increase effectiveness in explaining how to update test snapshots, so took care of that too: da4ebcd#diff-06ebd47d2ff579d04933c6ada16a9ce1f856852b7056ddada73d8256129f2bfd

Sometimes it's the little things.

CleanShot.2025-05-22.at.16.21.56.mp4

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@4163

commit: 0ca8001

[benjamincanac]

I agree the i-lucide-refresh-cw is better used for retry buttons, this one looks better for loading. I've updated the description with a video for reference.

I'm wondering if we should flag this as a breaking change though 🤔