qwik-city: add events to be able to react to the client side navigation

[jwickers]

Is your feature request related to a problem?

It would be nice to be able to react to the client-side navigation as currently, the page does not give any indication of loading which can lead to a bad user experience when trying to load a slow page, or on a slow network.

This should react when using the Link component or the useNavigate hook.

Describe the solution you'd like

Simple events could be dispatched on navigation start and end.

This could then be used in the App layout, where navigation loader could be a top progress bar to indicate something is loading:

  useClientEffect$(() => {
    console.log("adding document event listeners ...");
    const onNavStart = (e:Event) => {
      console.log("qnavigatestart event", e);
      document.getElementById("navigationLoader")?.classList.add("navigating");
    }
    const onNavEnd = (e:Event) => {
      console.log("qnavigateend event", e);
      document
        .getElementById("navigationLoader")
        ?.classList.remove("navigating");
    }
    document.addEventListener("qnavigatestart", onNavStart);
    document.addEventListener("qnavigateend", onNavEnd);
    return () => {
      console.log("removing document event listeners ...");
      document.removeEventListener("qnavigatestart", onNavStart);
      document.removeEventListener("qnavigateend", onNavEnd);
    }
  });

Describe alternatives you've considered

Using a store or signal to store if the navigation is on-going, but AFAICT this did not work well due to render buffering.
Raw events would also be easier to integrate with other libraries.

Additional context

No response

[manucorporat]

Should be possible now to track useLocation() isNavigating, to know when it's actively navigating!

[jwickers]

Yes, I saw this was added when I looked at the code source today after the update.
This could work for some use cases, will have to test it.

Not sure if there is a good way to capture start / end for UI updates and potentially prevent navigation just using this.

Currently, there is another issue with the URL not being updated when using navigate though.