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