Nuxt•3w ago

Loading Icon Timed out

Hello, I have this component:

<template>
  <div>
    <h1 class="text-xl font-bold text-gray-800">{{ props.data.title }}</h1>
    <ul>
      <li v-for="(topic,index) in props.data.topics" :key="topic.header">
        <div id="generate-wrapper" class="flex gap-2">
          <h2 class="text-lg font-bold text-gray-800">{{ topic.header }}</h2>
          <UButton v-if="!generated.includes(topic.header)" icon="i-heroicons-play" color="primary" label="Generate"
                   @click="generateSection(topic)" size="sm"  :disabled="current != index"/>
          <UIcon v-else name="i-heroicons-check-circle" color="success" size="sm"/>
        </div>

        <ul class="list-disc flex flex-col px-2">
          <li v-for="subtopic in topic.subtopics" :key="subtopic">
            <p class="text-gray-600">{{ subtopic }}</p>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<template>
  <div>
    <h1 class="text-xl font-bold text-gray-800">{{ props.data.title }}</h1>
    <ul>
      <li v-for="(topic,index) in props.data.topics" :key="topic.header">
        <div id="generate-wrapper" class="flex gap-2">
          <h2 class="text-lg font-bold text-gray-800">{{ topic.header }}</h2>
          <UButton v-if="!generated.includes(topic.header)" icon="i-heroicons-play" color="primary" label="Generate"
                   @click="generateSection(topic)" size="sm"  :disabled="current != index"/>
          <UIcon v-else name="i-heroicons-check-circle" color="success" size="sm"/>
        </div>

        <ul class="list-disc flex flex-col px-2">
          <li v-for="subtopic in topic.subtopics" :key="subtopic">
            <p class="text-gray-600">{{ subtopic }}</p>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</template>

that dynamically adds topics and buttons to my page. it works fine, however when opening the page I get this: [Icon] loading icon heroicons:play timed out after 500ms and the buttons don't have an icon. What can I do to fix it?

5 Replies

kapa.ai•3w ago

Hi @Just Simeon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing with the loading icon timing out is likely related to how icons are being loaded in your Nuxt project. Based on the knowledge sources provided, I can offer some suggestions to help resolve this problem: 1. Install Icon Collections Locally: It's highly recommended to install the icon collections you're using locally in your project. For the Heroicons collection you're using, you can install it with:

pnpm i @iconify-json/heroicons

pnpm i @iconify-json/heroicons

This allows the icons to be served locally or from your serverless functions, which is faster and more reliable for both SSR and client-side rendering. Learn more about icon collections (https://ui.nuxt.com/getting-started/theming#collections) 2. Check Icon Naming: Ensure you're using the correct icon name format. In your code, you're using i-heroicons-play, but the correct format might be slightly different. Double-check the exact name in the Iconify collection. For example, it might be i-heroicons-play-20-solid or similar. See icon usage examples (https://ui.nuxt.com/getting-started/theming#icons) 3. Increase Timeout: If the issue persists, you might need to increase the icon loading timeout. However, this is more of a workaround than a solution and doesn't address the root cause. 4. Verify Nuxt Icon Module: Ensure that the @nuxt/icon module is properly installed and configured in your Nuxt project. It should be listed in your runtime modules. Check Nuxt project info (https://github.com/nuxt/nuxt/issues/29387) 5. Use a Different Icon: As a temporary solution, you could try using a different icon that's known to work in your project. For example, you could use i-heroicons-arrow-path-20-solid, which is commonly used as a loading icon in Nuxt UI components. See loading icon examples (https://ui.nuxt.com/components/button#loading) 6. Check for Conflicts: Ensure there are no conflicts with other icon-related configurations in your project. Review your app.config.ts file if you have custom icon configurations. See default icon configurations (https://ui.nuxt.com/getting-started/theming#collections) If none of these solutions work, the issue might be more complex and could be related to your specific Nuxt setup or build process. In that case, you might need to provide more details about your Nuxt configuration and build process for further troubleshooting. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@294593079812292609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Just SimeonOP•3w ago

@kapa.ai I already have the heroicons installed locally, the naming is correct and other icons also work fine. Maybe interesting to note, when I click a button the icons suddenly appear.

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing more context about your issue. Based on the additional information you've shared, it seems that the icons are indeed available but not rendering immediately. This behavior, where the icons appear after interaction, suggests a potential issue with the initial rendering or hydration process. Let's explore some possible solutions: 1. Hydration Mismatch: The issue might be related to a hydration mismatch between the server-side rendered content and the client-side hydration. This can sometimes cause elements to appear only after user interaction. To address this, you could try wrapping your icon component in a <ClientOnly> component:

<ClientOnly>
  <UButton icon="i-heroicons-play" ... />
</ClientOnly>

<ClientOnly>
  <UButton icon="i-heroicons-play" ... />
</ClientOnly>

This ensures that the icon is only rendered on the client side, which might resolve the initial rendering issue. Learn more about ClientOnly (https://nuxt.com/docs/api/components/client-only) 2. Async Component Loading: If the icons are being loaded asynchronously, you might need to ensure they're preloaded or use a loading state. You could modify your button to show a loading state while the icon is being loaded:

<UButton :icon="iconLoaded ? 'i-heroicons-play' : 'i-heroicons-arrow-path'" ... />

<UButton :icon="iconLoaded ? 'i-heroicons-play' : 'i-heroicons-arrow-path'" ... />

Where iconLoaded is a reactive variable that you set to true once the icon has loaded. 3. Force Icon Preloading: You could try to force the preloading of icons by adding them to a hidden div in your layout or a top-level component:

<div class="hidden">
  <UIcon name="i-heroicons-play" />
  <!-- Add other icons you're using -->
</div>

<div class="hidden">
  <UIcon name="i-heroicons-play" />
  <!-- Add other icons you're using -->
</div>

This might trigger the icon loading process earlier in the page lifecycle. 4. Check for Dynamic Imports: If you're using dynamic imports for your components or icons, this could cause a delay in rendering. Ensure that your components are imported statically at the top of your script section. 5. Nuxt Icon Module Configuration: Double-check your Nuxt Icon module configuration. Make sure it's properly set up in your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: ['@nuxt/ui', '@nuxt/icon'],
  // other configurations...
})

export default defineNuxtConfig({
  modules: ['@nuxt/ui', '@nuxt/icon'],
  // other configurations...
})

6. Investigate with Vue DevTools: Use Vue DevTools to inspect the component tree and see if there are any issues with the icon components or their parent elements during the initial render. If none of these solutions resolve the issue, it might be helpful to create a minimal reproduction of the problem in a fresh Nuxt project. This would allow for a more detailed investigation of the specific circumstances causing this behavior in your application. Stack Overflow - Nuxt v-bind not working with NuxtUI icons (https://stackoverflow.com/questions/77295827) Remember, the sudden appearance of icons after interaction suggests that the icons are available but not rendering initially, which points towards a rendering or hydration issue rather than a problem with the icons themselves or their installation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@294593079812292609> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Loading Icon Timed out