Is it possible to show a page instantly before the page content has loaded?

[7ammer]

Hello 👋

I'm looking into Inertia and it seems that if you navigate to a page it waits for the data BEFORE rendering the template. While this keeps things nice and simple it would be nice to also have the ability to be able to render the page/template and THEN load the page data with loading states. This is the kind of experience I would expect in a mobile application. Can it be achieved in Inertia?

All the website's templates are (or at least can be) stored in a bundle.js file when the website first loads, right?

[RobertBoes]

I think there's currently no (easy) way to achieve this with Inertia, because of its protocol. The response contains which component should be rendered, so Inertia isn't aware of which component should be rendered before the XHR response is returned.
It's definitely something interesting worth exploring, because it would remove the need for something like NProgress and instead using some placeholder components, like https://github.com/michalsnik/vue-content-placeholders

[7ammer]

Thanks for replying :)

Ah, I see! I assumed inertia copied all the required data to the vue router so that the vue router knew what view should be shown for each route from the first page load.

[ajnsn]

Hey @RobertBoes

It's definitely something interesting worth exploring, because it would remove the need for something like NProgress and instead using some placeholder components, like https://github.com/michalsnik/vue-content-placeholders

fyi: Some time ago Jonathan digged into this idea. I think the idea is about dynamic imports. See also this discussion. This draft PR could also be interesting.

[RobertBoes]

Ah, that was basically what I meant, I did read about that at the time, but forgot there were even plans for it because it's been almost half a year without updates

[ajnsn]

Hey @7ammer
it's one of the key benefits of Inertia to keep things simple and primarly provide the routing and data providing. But you can still do almost anything you do with a regular SPA, e.g. you can always fetch additional or time intensive data via a plain XHR/fetch from an endpoint that returns JSON.

If you want to stick to Inertia all the way you can use lazy data evaluation to render the component and then fetch additional data with a second partial visit, that replaces the initial one and preserves state , simple Laravel/Vue example:

return Inertia::render('Users', [
    ...
    'users' => Inertia::lazy(fn () => User::get()),
]);

onMounted(() => {
    Inertia.visit('/users', {
        preserveState: true,
        replace: true,
        only: ['users'],
    });
});

This will immediately render the Users-component and fetch the users afterwards.

[RobertBoes]

This will immediately render the Users-component and fetch the users afterwards.

It won't render immediately, because the first request is used to fetch the component name it should render, then when that's returned another request is made to load the actual data. Imagine the user being on a slow connection, the initial response takes ~1s to complete, so it takes 1 second before the placeholder is shown. Then when that's shown another request is made, which would be ~1s plus the additional processing time, thus making the user essentially wait a lot longer than needed.

I'd consider this a workaround, because it requires 2 roundtrips to the server, just to display a placeholder component.

[ajnsn]

Ah I only encounter this challenge when there's lots of data, e.g. 5k records in a table. Otherwise I work with Inertia like I would with Blade. That's what I mean with "immediately" what indeed it is not. Sorry when this was not clear and thank you for elobarating that further.

[clementmas]

This is also a crutial "option" for me. There are many downsides to rendering all the templates on the frontend (duplication of logic, required tooling/compilation, etc.). But the main advantage in my opinion is to have an app that feels really quick and snappy.

At the moment Inertia is really convenient over a traditional Vue Router setup but it feels much slower. I would then stick to a much simpler setup with Blade views + JS sprinkles.

I think the proposed placeholder feature is a good first step. Is the code available somewhere? It could be a good starting point for a PR if you're open to it.

[bubokko]

I think this is where Inertia should go in the future. I started thinking, what's the point of the Single Page App if the pages don't load instantly? Is it really that different experience from the old fashioned, static websites? Slightly. Is it worth all the hassle if we don't get the immediate response anyway? What's the difference if the loading bar is in the body (if we use progress config) or under the URL bar?

[stefanocurnis]

In v2 you'll have deferred props and async requests that could help you in reaching that SPA feeling when you change page. But then, no SSR for that kind of pages.

[tiredpyrx]

are there any updates on this topic?

[tiredpyrx]

I will just say it. I can't believe a tweet with a title "proof of concept" is the only thing we are getting about this. It's like they're saying "fuck you it works on my computer".