Clear outlet content (and update related internal data) at start of handling a navigation event.

[void-spark]

Hi!

Is this project still maintained, if not any suggestions for other good standalone routers? :)

We have this request: When a user triggers a navigation (e.g. clicking a menu link which updates the url). A new element to show in the outlet is determined. It could be that for this decision, first some rest calls must be done which can take time. So the action returns a promise which might take some time to resolve. When this happens, we would like to immediately remove the old element being held in the outlet, to be replaced later with the new element when the action resolves. This would be visually clearer for the user in our case, to show navigation is in progress, but also helps with some technical issues (during the decision making, old data gets cleared, which means the old element misses data and starts giving errors). Or instead of removing the old element, replacing it with a temporary stand-in would work too (actually, that could be nicer, then you can show please wait or so :) ).

I tried doing this by removing the element directly, without using the router. But the router holds some internal state, and if the old and new element are the same (according to the internal state), the new element isn't put back, so we end up with an empty page :)

What does work is hacking it into the router, with a method that clears both the element and internal state: this.router = new class extends Router { constructor() { super(shadowRoot.querySelector('main'), {baseUrl: routerBaseUrl}); }

  clearCurrent() {
    const outlet = this.getOutlet();
    if (outlet?.firstChild) {
      outlet.removeChild(outlet.firstChild);
    }
    this.__previousContext = undefined;
  }

This seems to work, but is ugly and fragile :)

If there's already a better way of doing this, please let us know! :)

Thank you for you attention! :)