If you use NgRx for state management, then there’s no better place to manage your loading UI than NgRx Effects.

Instead of fiddling around with your loading screens in your components, try using this simple pattern in Effects to control the UI when making database CRUDs or performing asynchronous tasks that are implemented with NgRx Effects. The pattern is clean, simple, and easily scalable for as many UI animations as you want. You can easily modify any existing effects you have to use this pattern.

This article assumes you’re already familiar with NgRx and Effects. It doesn’t include the basics of how to set up and use NgRx.

#javascript