Access the loading state on client-side navigation

[luisherranz]

We need to figure out a way to manage the loading states during navigation.

If we don't offer any API, people can get away with their own state:

import { actions as routerActions } from "@wordpress/interactivity/router";

const { state } = store("myPlugin", {
  state: {
    isNavigating: false,
  },
  actions: {
    *navigate() {
      state.isNavigating = true;
      yield routerActions.navigate("https://...");
      state.isNavigating = false;
    },
  },
});

<div data-wp-bind--hidden="!state.isNavigating">
  Loading next page...
</div>

But when the navigation is started by another block or directive, there needs to be a way to hook into it.

I haven't thought about this yet, but maybe there could be some global state that can be accessed by anyone, like:

<div data-wp-bind--hidden="core/router::!state.isNavigating">
  Loading next page...
</div>

Ideas/suggestions and use cases to figure out the requirements are welcomed.

[ajgagnon]

I haven't thought about this yet, but maybe there could be some global state that can be accessed by anyone, like:

Global state would make sense to me. If there is a core navigate function provided by the interactivity api, it would make sense that you can get the state of it as well. Standardizing this would help other blocks understand if something is loading without needing to know the namespace or any potential plugin.