Nuxt.js: Is there any asyncData placeholder thing?

[lukasborawski]

So. I'm fetching some data in asyncData method, of course before my page is loaded. Now, sometimes this data is large and reach data takes a bit. On this state my page is blank and it's not good, is there any way to set some kind of asynData placeholder, loader, something?

@Atinux @alexchopin @pi0

_{This feature request is available on Nuxt.js community (#c2369)}

[Atinux]

It's a bit more tricky since it has to be fully loaded on server-side. I call this reactive loading and I think I will implement it soon.

The idea is to add a reactive: true property on the page to tell nuxt.js to not wait on client-side but instead call them and add $loading: true in $data. This way you can show a placeholder while asyncData & fetch finish.

[jeroenvisser101]

@Atinux wouldn't it then just be a SPA template? Would it have anything already rendered in the returned JS?

[lukasborawski]

@Atinux is this an quick thing or should I seek some replacement for this?

[Zip753]

@lukasborawski I think this is more or less what I addressed in #2568, there's also a working solution proposal with example there.

@jeroenvisser101 The difference between pure SPA and the proposed approach is that you keep the SSR behaviour, i.e. asyncData gets loaded fully whenever you fetch the page from server, while on client it would behave exactly as SPA.

[manniL]

Because this issue seems to be inactive for quite some time, I'll close it now. If you feel like it deserves some attention because it's not fixed, feel free to ping me and I'll reopen it.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.