Optimistic updates for region based navigation

[fabiankaegy]

I noticed whilst working on a filter block for the query loop that uses the region-based navigation that there isn't really a good solution for optimistic updates of UI that is dependent on region-based interactivity.

Or maybe there is, but it isn't documented anywhere.

I'd love to find some best practices for how to inform a control that the router is fetching stuff already

[luisherranz]

Hey Fabian, optimistic updates are not possible for server-side rendered content, as the ability to generate that HTML is not in the client.

This is not something specific to the Interactivity API, as for example you can't do optimistic updates of Server Components in React.

If you want to keep the user informed that new content is being fetched, you can show them some kind of message or animation:

const { state } = store('myPlugin', {
  actions: {
    *navigate() {
      state.isFetching = true;
      const { actions } = yield import('@wordpress/interactivity-router');
      yield actions.navigate('...');
      state.isFetching = false;
    },
  },
});

By default, the router is already showing a top loading bar animation when navigation occurs. It only appears if the navigation takes longer than 300 milliseconds to start, so it's not always visible.

If you want to disable it, you can do the following:

const { state } = store('myPlugin', {
  actions: {
    *navigate() {
      state.isFetching = true;
      const { actions } = yield import('@wordpress/interactivity-router');
      yield actions.navigate('...', {
        loadingAnimation: false,
      });
      state.isFetching = false;
    },
  },
});

Does that make sense? Were you expecting a different type of API?

By the way, the documentation for client-side navigation is very scarce, but we are planning to improve it soon.