CODEWITHSUNDEEP
node.jsangular
Abdul K Shahid
Abdul K Shahid

Reputation: 528

Angular - How to create loading screen 'like gmail'

In my angular app, I have the loading spinner working all over the application. using NavigationStart and NavigationEnd conditions.

But I would like to have a spinner which comes up as soon as someone refreshes the page i.e, before any of the components load. So that it is an indication for the people who are loading the page first time, that the app is loading, by displaying the spinner.

I am using angular 6 in the front and Node js in the backend.

Is there a way to enable the spinner and disable it once the page has been loaded.

It is not possible to put the loader inside any component as the component is not itself rendered at this point of time.? (as you can imagine!)

Is it required to put the spinner in the index.html or is there a way to check the condition to know if the components are rendered fully.?

Because for the users with very slow internet connection, the page looks like it is dead even until the login page loads.

I have added the code in the login component and expected the spinner to work.

But the spinner doesnt show up until the login component is initialized.

Upvotes: 1

Views: 789

Answers (3)

Pallamolla Sai
Pallamolla Sai

Reputation: 2493

In index.html in app-root component I wrote "loading..." like below.

<body>
    <app-root>
       Loadingg.......
    </app-root>
</body>

Whenever app and it's child components are rendered this Loading... was automatically overidden by angular. I am assuming all components will be rendered in only. (If you want to add Loading.. to any individual component you can write like below code).

<app-your-wish-component>
     Loadingg....
<app-your-wish-component> // Until and less this component is not rendered **Loading...** will be displayed after that component loads **Loading...** will automatically gone.

Upvotes: 1

Alfredo Alonso
Alfredo Alonso

Reputation: 11

I think the best approach would be to add the spinner as "fixed/static" content in the index.html so it's the first immediate thing that loads in your site.

Upvotes: 0

RadW2020
RadW2020

Reputation: 148

You should start using Angular Lifecycle Hooks. https://angular.io/guide/lifecycle-hooks

Regarding refresh page, your best friend will be ngOnInit() in most cases

Upvotes: 0

Related Questions