CODEWITHSUNDEEP
javascriptangular
Scipion
Scipion

Reputation: 11888

Set a load indicator on page change in Angular2

I did create a directive which set a load indicator (spinner) on the whole page while the page is still loading. My directive has just one argument: should the spinner be displayed or not : <div class="app-container" [busy]=!pageLoaded>

In my app component, I have done the following in the constructor :

    this.pageLoaded = false
    router.subscribe((routeName: String) => {
        /* Other stuff */
        this.pageLoaded= true
    })

This router.subscribe will be called everytime the router is changing (from one page to anotherby instance). The only issue, is that my pageLoaded will keep its true value. How can I set it back to false without triggering my busy directive ?

Upvotes: 0

Views: 220

Answers (1)

jonas.hartwig
jonas.hartwig

Reputation: 897

what I usually do: Route changes are quite quick. I assume that you want to do some resolve (data fetching) for the routes, right? So in this case I created a http handler that increases a local counter when a request starts and decreases it when a request ends/fails. While there the counter is gt 0 show loader.

In special case if you dont want to show the loader I usually give that as a configuration to the request object and make a decision what to do with the counter based on this set or not.

Regards

Upvotes: 0

Related Questions