Nuxt•2w ago

Dashboard Template long loading times

Hey everyone, I've set up the Nuxt UI Pro Dashboard template and am encountering an unusual performance issue in development mode. The page's initial load is very fast (around 0.7 seconds), but sometimes after a refresh, I get a white screen that lasts between 5 and 20 seconds. Sometimes, the page loads quickly but the data isn't fully loaded. It also takes 5-20 seconds for the site to become interactive, preventing me from opening DevTools or collapsing the sidebar during this time. tryed to disable ssr and devtools didnt bump the performance I followed these steps for the setup:

npx nuxi@latest init -t github:nuxt-ui-pro/dashboard
pnpm install
pnpm dev --host

npx nuxi@latest init -t github:nuxt-ui-pro/dashboard
pnpm install
pnpm dev --host

6 Replies

kapa.ai•2w ago

Hi @Cryptox1337. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information in the knowledge sources, there are several potential causes and troubleshooting steps for the long loading times and white screen you’re experiencing with the Nuxt UI Pro Dashboard template in development mode: 1. SPA Loading Screen Placement Nuxt 4 changed the default DOM location for the SPA loading screen. If you see a persistent white screen, it may be related to how the loading template is rendered. You can control this behavior with the spaLoadingTemplateLocation experimental option in your nuxt.config.ts:

export default defineNuxtConfig({
  experimental: {
    spaLoadingTemplateLocation: 'within', // or 'body'
  }
})

export default defineNuxtConfig({
  experimental: {
    spaLoadingTemplateLocation: 'within', // or 'body'
  }
})

Setting it to 'within' or 'body' changes whether the loading template is inside or outside the Nuxt app root, which can help avoid a flash of white or a stuck loading state. If you have custom CSS or JS targeting the loading template, you may need to update your selectors accordingly. This change is intended to prevent a white flash while the app is hydrating, but misconfiguration could cause the loading screen to persist longer than expected New DOM Location for SPA Loading Screen spaLoadingTemplateLocation. 2. DevTools and Performance Bottlenecks Some users have reported that enabling Nuxt DevTools can significantly slow down development builds and even cause long white screens or delays before the app becomes interactive. As a workaround, try disabling DevTools in your nuxt.config.ts:

export default defineNuxtConfig({
  devtools: false
})

export default defineNuxtConfig({
  devtools: false
})

This may improve load times, though you’ll lose some debugging features [v4]: Request timeout while loading module. 3. Large CSS/SCSS Compilation If your project uses a lot of CSS or SCSS (for example, with Bulma, Tailwind, or similar frameworks), the Vite builder may take a long time to compile styles, causing timeouts or long initial loads. Some users have worked around this by pre-building their CSS outside of Nuxt and then importing the generated CSS file, rather than letting Vite handle all the compilation during dev [v4]: Request timeout while loading module. 4. General Performance Best Practices - Avoid overusing plugins, as they can block hydration and slow down interactivity. - Remove unused dependencies and code. - Follow Vue and Nuxt performance tips, such as using lazy loading for components and lazy hydration to delay making components interactive until needed. - Use the Nuxt DevTools Timeline and Inspect features to identify bottlenecks if you re-enable DevTools Nuxt performance Common problems. 5. Data Fetching Delays If your data is slow to load, ensure you’re using useFetch or useAsyncData properly to avoid redundant client/server requests and optimize payload delivery Nuxt performance. --- Summary:
Try disabling DevTools, check your SPA loading template configuration, and consider pre-building CSS if you use a heavy CSS framework. If the issue persists, use Nuxt DevTools (if enabled) to profile where the time is being spent. If none of these steps resolve the issue, the knowledge sources do not provide a more specific solution for your case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Cryptox1337OP•2w ago

this is the state when i cant open dev tools and collapse sidebar for example this sceen stays for arround 15-20sec until i can use the site fully

Cryptox1337OP•2w ago

hope this is allowed here is the site http://148.251.43.81:3000/

AzotoN1•3d ago

@Cryptox1337 Did you fix your problem? I'm having the exact same issue. After refreshing, the page has no styles applied. After everything loads, I have to wait a few seconds for the "Pinia" to load, and only then does the page become interactive.

Cryptox1337OP•3d ago

No i did not I think its because of the development build i moved to local now and its a lot better then on the server directly

Gaming

Programming

Dashboard Template long loading times

Did you find this page helpful?