[Feature] Take advantage of the new Navigation API

[martinszeltins]

What problem is this solving

Currently if you are lazy loading your routes / views and then you navigate to a new route, it needs to fetch the new route and you can manually add a fake loading indicator while it does that, but for SPAs it always felt fake. But now there is a new browser api called the Navigation API that is specifically designed for SPAs to show the native browser loading indicator while navigating between routes.

Proposed solution

Take advantange of the new Navigation API: https://developer.chrome.com/docs/web-platform/navigation-api/ https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API

So now Vue Router can take advantage of the new API to allow the browser to show the native loading while navigating lazily between routes. It gives a nice native feel to SPA apps.

Yes, this is bleeding edge feature not currently supported everywhere but I think it would be nice to still give users the option to use this new feature IF their browser supports it.

React is already implementing it in React Router - https://dev.to/romaintrotard/back-to-the-future-navigation-api-4pil

Demo: https://gigantic-honored-octagon.glitch.me/

(In the demo, you can activate the Add an artificial two-second delay to all navigations (should impact the loading spinner/scroll restoration/focus reset/accessibility announcements). checkbox to see the native loader appearing on the tab when navigating)

Describe alternatives you've considered

No response

[posva]

As said in other issues: I’m aware and active in the discussions but the API hasn’t been accepted by WebKit (yet?) so that’s quite the blocker as it could still have breaking changes (it has happened already) or even never be accepted. Once it’s accepted we will have to wait for it to be shipped and become stable, so few years until it becomes the default. That being said it’s promising and I’m looking forward to reinventing the router with this, making both histories coexist until the navigation api is well spread

[martinszeltins]

As said in other issues: I’m aware and active in the discussions but the API hasn’t been accepted by WebKit (yet?) so that’s quite the blocker as it could still have breaking changes (it has happened already) or even never be accepted. Once it’s accepted we will have to wait for it to be shipped and become stable, so few years until it becomes the default. That being said it’s promising and I’m looking forward to reinventing the router with this, making both histories coexist until the navigation api is well spread

@posva Well all Chromium browsers have already shipped it stable. I don't think at this point the API should have any breaking changes.

P.S. Where are the discussions regarding this happening?

[posva]

It’s happening here: https://github.com/WICG/navigation-api/

FYI it’s not shipped as stable. It’s dangerous to build prod applications relying on this as they could stop working in the future without any change

[martinszeltins]

@posva I totally understand wanting to wait for it to become stable. But it looks like the Angular team is considering refactoring their router to support the new API - https://github.com/angular/angular/issues/53321

[posva]

Their response is pretty much what I meant. I have already taken into account the new API to rework Vue Router and other features like Data Loaders

BTW the Navigation API will be used in the future. As explained before, there is no rush at all and if Webkit never adopts the API, we won't be able to take advantage of it