search

nuxt / icon

The <Icon> component, supporting Iconify, Emojis and custom components.
https://stackblitz.com/edit/nuxt-icon-playground?file=app.vue
MIT License
961 stars 59 forks source link

Icons Load on SSR Slow #233

Closed moshetanzer closed 3 months ago

moshetanzer commented 3 months ago

Hi @antfu

Thanks for this great lib.

When using ssr icons take ages to load. For eg if I have a toast with an icon, toast shows and then only a second or so later icon shows. Have I missed something?

Am just using nuxt/icon as part of Nuxt UI

Regards

antfu commented 3 months ago

Can you share a minimal reproduction? That deps on which mode you use and your production servers' location (if icons are loaded remotely)

moshetanzer commented 3 months ago

Will try reproduce. Just a nuxt ui project self hosted. Will a video help?

antfu commented 3 months ago

Better a code repo so I can test myself and play with solutions

moshetanzer commented 3 months ago

Here is repro - go into mobile view, each time you refresh page and access mobile nav menu - icons take a second to show https://landing-template.nuxt.dev/

thanks!

antfu commented 3 months ago

Seems working fine for me, the icons should also be cached in multiple requests - do you have a more specific repro steps with the source code repo?

moshetanzer commented 3 months ago

not sure what you mean "working fine for me" - the icons take a second to show - this isnt even an ssr:true site. Just a basic refresh in between not a hard refresh. Could be an issue with nuxt/ui though

https://github.com/user-attachments/assets/09515801-647b-4fc1-b02d-c22bd208a5b5

moshetanzer commented 3 months ago

Hey @antfu

just following up on this...

antfu commented 3 months ago

I insist on having a minimal reproduction so I can examine it more thoroughly and find the cause; screenshots and videos are not reproductions.

antfu commented 3 months ago

We temporarily closed this due to the lack of enough information. We could not identify whether it was a bug or a userland misconfiguration with the given info. Please provide a minimal reproduction to reopen the issue. Thanks.

Why reproduction is required

moshetanzer commented 3 months ago

Hey @antfu,

Not sure what you mean - provided - https://landing-template.nuxt.dev...

antfu commented 3 months ago

Oh you mean https://github.com/nuxt-ui-pro/landing? 😂

antfu commented 3 months ago

I think this is down to https://github.com/nuxt/icon/issues/34

moshetanzer commented 3 months ago

Sorry! Yes should have put the gh link. I hear ok. Any current workaround for nuxt/ui? (since they dont use the tailwind icon plugins as far as i know anymore even thought it is mentioned here that they do - https://github.com/nuxt/icon/issues/34#issuecomment-2003339110)

antfu commented 3 months ago

Please give a try with https://github.com/nuxt/icon/issues/34#issuecomment-2312164445, it should be resolved.