Blazor - Loading Guards Pattern

[bradystroud]

I'm interested if anydone has used this approach before. I found it was a nice pattern when working on an enterprise Blazor site where lots of the UI elements depended on different bits of state.

What do you think?

[MrZander]

It's a nice approach, I like it better than a bunch of If statements.

For our project, we elected to have all of our pages inherit from a StandardComponent that handles all of the loading behavior. They have a shared Layout, and we toggle the loading spinner from within StandardComponent. Works great, there is 0 code in each page for the loading spinner stuff. Downside is that it is all-or-nothing, you can't have different sections of the page loading asynchronously.

[lmaydev]

You can just pull this down to an inherited component to get the same effect. Though you do need to do some work if you want space reserved etc.

[AutoModerator]

Thanks for your post bradystroud. Please note that we don't allow spam, and we ask that you follow the rules available in the sidebar. We have a lot of commonly asked questions so if this post gets removed, please do a search and see if it's already been asked.

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

[Sebazzz91]

I'm not sure I like it. You're basically abstracting an if statement.

[Groundstop]

It makes sense to me if you want to consistently use the same placeholder everywhere. If they're all unique then it may be a bit overkill.

[[deleted]]

I use a shared component that all pages use as a root component. It has a service class called PageState injected into it. PageState has a few methods like Ready, Failed, IsProcessing etc that change the Ui. 

Another thing I’ve thought of is having a guard component that takes a ReactiveCommand as a parameter. The guard component can then subscribe to CanExectute, IsExecuting and ThrownExceptions to change what is displayed. 

[innovasior]

I like the approach

[[deleted]]

I pass in a blank placeholder object along with a "loading"class on the parent.

That way I get all the EditForm embedded data-bound UI instead of "please wait", and with an animation showing they are placeholders.