Prepare LWC after page has redirected and came back

Question

I have a simple LWC with a button embedded in a record's FlexiPage that redirects the user to another URL-addressable component:

HTML

<template>

    <template if:false={loading}>
        <button  onclick={open}>Open</button>
    </template>


    <template if:true={loading}>
        <div>
            <lightning-spinner size="small" variant="brand"></lightning-spinner>
        </div>
    </template>

</template>

JS

import { LightningElement, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class Launcher extends NavigationMixin(LightningElement) {

    @track loading;

    open() {

        this.loading = true;

        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                componentName: 'c__otherComp'
            },
        });
    }

    connectedCallback() {
        this.loading = false;
    }
}

I added the spinner since sometimes it could take a couple of seconds for the navigation to be done.

The issue I'm facing is that after the redirection if the user presses the "Back" button in the browser that presents again the already loaded FlexiPage, the component will stay with the loading attribute to true and therefore still showing the spinner.

I thought that adding the following should do:

disconnectedCallback() {
    this.loading = false;
}

Also tried similarly with renderedCallback but it doesn't seem to be executing when using the "Back" button in the browser, seems to be taking everything from the browser cache.

Any way to handle re-init or re-preparation when you leave the page that would be loaded from the cache to avoid this behavior?

Answer 1

In case someone experiences this same predicament, what I ended up doing is having a wired function to the current page reference so when it changes I can re-init the component

import { LightningElement, track, wire } from 'lwc';
import { NavigationMixin, CurrentPageReference } from 'lightning/navigation';

export default class Launcher extends NavigationMixin(LightningElement) {

    @track loading;

    @wire(CurrentPageReference)
    wiredPageRef() {
        this.loading = false;
    }

    open() {

        this.loading = true;

        this[NavigationMixin.Navigate]({
            type: 'standard__component',
            attributes: {
                componentName: 'c__otherComp'
            },
        });
    }

}