Vue.js/Inertia wait for all sync setups before render-CodePudding

I am generating my navigation menu server side and rendering it on the client side using async setups and the suspense API. Since Inertia gives me this information every page load, this means that every time I change page the navigation has to render again and flickers due to the async setups and suspense.

Is there a way to wait for all async setups before discarding the previous page and rendering the new page? Like a full-vue suspense.

CodePudding user response：

I ended up going with the option suggested by @RobBiermann

Using the method described in https://github.com/inertiajs/inertia-laravel/issues/134#issuecomment-966387241:

On HandleInertiaRequests middleware:

public function share(Request $request): array
{
    $firstLoadOnlyProps = $request->inertia() ? [] : [
        'translations' => // your logic here
    ];

    return array_merge(parent::share($request), $firstLoadOnlyProps, [
        'yourNormalAlwaysSharedProps' => fn () => // your logic
    ];
}

And persistent layouts https://inertiajs.com/pages#persistent-layouts.

It is possible to load components once and keep them until reload. This prevents the flicker I experienced when switching between pages.