How do I not reload component when page change

Ionic Framework ionic-v3
1

What I have is page a and b. Both page a and b has common footer component which contains timer.
a.html and b.html has has

<ion-footer no-border>
      <ion-footer-common></ion-footer-common>
</ion-footer>

The footer component is same on the code part only. But when page change from b to a or a to b, timer will be reset because the component will called when the page will called.

So what I did is saving the timer value to service but the problem is:
I am in page a and timer value is 35. Then I go to page b
Then as the footer component load again, the footer of page b will be blank for some time and it will start from 35.
So my question is how can we prevent blank? OR how can we not reload common component when page change?

2

You have to define your footer in app.html, if you want to make it independent of page changes. Another way would be to instead of using NavController for changing the pages just keep one page and switch its content.

Here is a way of how to do this: