Angular - Code to trigger only first time Load

Question

I've created a skeleton structure for my app in Angular 9. The skeleton code initializes in ngAfterViewInit() hook.

ngAfterViewInit() {
    this.showSpinner = false;  
     this.interval = setInterval(() => {  
       this.domLoaded = true;
     }, 5000);
}

But every time I load this page (or come again after navigating from any other route) it still Fires the event to show the skeleton. I want the skeleton only show on the first Load of app.

I have also used ngAfterContentInit() but that didn't work

IDK why you only want first time instead you should need to show whenever content not gets loaded. anyways for the first time you can set some value in web storage and then make a check accordingly — Pardeep Jain
– Pardeep Jain, Commented Jun 24, 2020 at 9:24
I'm using Nastaleeq Fonts, the other structure is simple and loads fast but the fonts took time, for this purpose I used the skeleton technique. And once the fonts loaded, then it goes smooth that is why I was thinking on to use this only the first time load. — user54226
– user54226, Commented Jun 24, 2020 at 9:27

Tashi Tobgay Dakpa · Accepted Answer · 2020-06-24 11:19:28Z

1

There are a lot of ways to go about with this (also, I do agree with the comment by Pardeep - you should look for other ways) but sticking to your question, try to save the state within localStorage/sessionStorage so that the information is not lost after navigating to other pages in your site. So something like this will work:

ngAfterViewInit() {
  this.showSpinner = false; 
  if (!sessionStorage.getItem('siteInit')) {  
   this.interval = setInterval(() => {  
    this.domLoaded = true;
    sessionStorage.setItem('siteInit', 'true');
   }, 5000);
  } else {
   this.domLoaded = true;
  }
}

edited Jun 24, 2020 at 11:19

answered Jun 24, 2020 at 10:05

Tashi Tobgay Dakpa

3531 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user54226 Over a year ago

It sets the session variable for the first time, but returning on this page again doesn't work and the page just shows loading... even the session value can be seen in the console

Tashi Tobgay Dakpa Over a year ago

@user54226 Ah sorry about that, seems like my code didn't set domLoaded to true, I have updated the code. Can you try again

opp · Accepted Answer · 2020-06-24 09:58:10Z

0

The ngAfterViewInit()lifecycle hook gets called every time, your component is loaded. To achieve your required functionality you could use a Singleton Service and set the domLoaded property there.

answered Jun 24, 2020 at 9:58

opp

1,01810 silver badges17 bronze badges

Comments

Cristian Sarghe · Accepted Answer · 2020-06-24 10:10:38Z

Assuming you placed <router-outlet></router-outlet> in app.component.ts, this component will only load once and the subsequent navigation will happen within the application (Single Page Application benefits).

Therefore, you can run the code right there if this is what you need.

If you want to only run the code once the first time a user accesses your page and not run it for subsequent refreshes, you can use the browser Local Storage to keep track of the state (mark if it's the first time accessing the page or not). Then you'd need to check on every page load whether you need to run the code or not.

Strictly related to your question, if you're tracking the state of a spinner, you most likely want it to run on every page refresh. For this you can hold its state in a Service instead of Local Storage.

Side note: Accessing browser's Local Storage is much more inefficient than accessing a variable that's already in memory.

Collectives™ on Stack Overflow

Angular - Code to trigger only first time Load

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related