How to Stop _handleBack() event before template loads

Get Help
1

Hi All,
When we navigate to a page using the router, how can we determine the complete template, has been created for a page instance? Is there a getter function available that can indicate when template creation is finished?
I’m currently facing an issue with my router stack, which consists of three page instances: A, B, and C. While navigating from one page to another, I display a spinner with some delay in seconds. The problem I’m experiencing is that when I trigger the _handleBack() event multiple times on page C, I eventually arrive at the home page A, but the spinner continues to load. This issue could potentially confuse users and lead them to unintentionally close the app. Here i want to try like, Once the template is fully rendered, you can then safely trigger the _handleBack() event.

Any suggestion On this?.

2

Hi!

Inside your page templates, the router will call onChange when navigating. Depending on your setup - the page instances should already be created, so they don’t do a full creation.

What I’d recommend is having some logic in your pages which sets a loading = true flag. Then in your app you can traverse the focusPath to look for loading = true and if its true, keep the spinner up and try again every 100ms or so

let focusPath = this.application._focusPath
const loaded = focusPath.every(elm => !elm.loading)

Chris

3

Eriks response in Discord:

  1. Hi! The Router overrides the _handleBack method for a Routed App so it can call the following logic on back press: Lightning-SDK/router.js at 92d2d9a35809568b8e9e1b3c65529f0b5221858a · rdkcentral/Lightning-SDK · GitHub From a page perspective you have the ability to prevent or execute this logic ( bubble up the event ) under certain conditions:
class C extends Lightning.Component {
  static _template(){
    ...
  }

  // this will now be invoked instead
  _handleBack(){
    if(this.active){
       // explicitly return false to let event bubble up
       return false;
    } 
  }
}

this.active will be true when the page alpha > 0, visible:true and within renderable viewport. This would prevent stepping back from pages that are not fully loaded yet. I’m not sure if this.active fully meets your expectations of a rendered page. It could be that it still needs some transitioning, in that specific case you could add some extra checks to the condition before returning false explicitly. If you’re interested you could take a peak at how events are injected in the Core from focussed component to the Application: Lightning/Application.mjs at 2e4c829be45614290405c222bf102022a6219153 · rdkcentral/Lightning · GitHub (edited)
2.

the router also provides logic to handle navigation through the history yourself: LightningJS.io - Documentation

4

You can try using isNavigating(), check the condition and block routing to other pages. Please check if it satisfies your case.

_handleBack() {
    if (this.active && !Router.isNavigating()) {
        ... // Router.back() OR perform your operation
    }
  }