28. Implement Shared Loading Spinner Component in the Ngrx Shared State - Angular Ngrx

[@kellyncodes7421]

Good job leela!. I have watched from the begging and I must say, thank you so far. I must finish the series within few days as it gets more interesting from one series to another...

[@serkansayhan351]

This tutorial is awsome. I think this is the best NgRx tutorial in KZbin. Thanks a lot Leela.

[@LeelaWebDev]

You're very welcome!

[@aaronaaronaaron5922]

I really agree with all these people whi think this serie is amazing!!! 🥊🥊 Thanks a million 🤸‍♂️🤸‍♂️

[@LeelaWebDev]

Thank you for your heartful support. I saw all your comments that you post. I feel very much motivated when i read your comments. This gives energy for me to do more and more videos .

[@aram5642]

I honestly benefit a lot from the series, thanks for it, and I would welcome even more :) but please also accept a tip from me: in the effects (~19:00) don't produce side effects in the `map` operator. This is a very common thing I am seeing. While it does work, it makes code a bit messy. Use `tap` instead. Also, in this specific case seems like the perfect operator would be `finalize` so that the loading spinner goes away regardless of whether an error occurred or not :)

[@SamiullahKhan]

So in the effect after map operator we should add another operator called finalize and handle loading there. Additionally, Can you expand on that what are the drawbacks of side effects in map operator. Currently a map operator does three jobs 1. Setting Loader 2. Formatting using 3. Returning Action What is the best way to handle it without causing side effects?

[@learndaily3589]

awesome content , I am flowing your course sir. I am able to understand very clearly Thank you very much sir

[@san-yc4sl]

Awesome tutorial Leela! Keep up the good job. For anybody having problems not seeing the spinner on state change to true, please take care to import the correct initialState (./shared.state) file in the shared.reducer.ts

[@Prakashsingh-tf3wp]

thanks for in-depth knowledge

[@NeerajKumar-zo6bh]

Quick question. Since you removed counter state and post state from AppState. But in the couter output component still we are injecting store by referring AppState in the generic. Why its not giving compilation?

[@SameerAliUltra]

You're a life saver

[@arunbharathi1538]

Hi Leela, Amazing Content I have a doubt, you are changing Appstate in this video from counter:counterState; post:postState; to [SHARED_LOADER]:SharedLoadingState but we still using store in both post and counter but it is working fine how?

[@LeelaWebDev]

Every thing will be in the appstate

[@arunbharathi1538]

@@LeelaWebDev But how? you removed counter:counterState; post:postState; from Appstate right? when will it add again? while lazy loading?

[@LeelaWebDev]

@@arunbharathi1538 yeah

[@saswatichoudhury7105]

for me also it is throwing error,u removed the counter and posts,how is it working for you in counter-output component,for me it snot compiling at all

[@shrutisaxena320]

where can i get username password for the git project to run locally

[@senburbensgaming]

Hi Leela. Can we put the code that dispatches the loading spinner action in an interceptor instead. We would dispatch the action before the outgoing http request with a value of true for status and dispatch it again after the incoming response in pipes operators like tap or catchError with a value of false this time. In this way it would have worked for all http requests. No need to dispatch the action no more in effects and in components. The interceptor would do the work. Let me know if it s a good solution please. Love your tutorials by the way.

[@LeelaWebDev]

Yeah of course we can do it

[@AviatorBro]

done - 2 april

[@senburbensgaming]

Hi Leela. What do you think if we dispatch the loading action in a dedicated interceptor in one place before and after the outgoing request instead ? It would have worked for all http requests. No need to do it for every effects and in every components while submitting a form for instance. this.store.dispatch(showLoading, { status : true }); return next.handle(req).pipe( finalize(() => { this.store.dispatch(showLoading, { status : false }); }) );