How to intercept oninitialized and onafterrender in each blazor component ?

[gjpsiqueira]

Hi guys! I'm currently working on Blazor Server project. I need to create a spinner indicator to my user when the component it is changed (route). So, I think to create a component and call it in OnInitialize then stop in OnAfterRender. I would like to make in each component of my project automatically, without have that make manually.

How I do ?
Thanks in advance

I couldn't figure out the best area label to add to this issue. If you have write-permissions please help me learn by adding exactly one area label.

[lambdageek]

This doesn't sound like a runtime issue. We should transfer this to dotnet/aspnetcore, I think /cc @danroth27

[javiercn]

@gjpsiqueira thanks for contacting us.

I would suggest using a different approach. Instead of trying to do things within OnInitialize and OnAfterRender, I would create a Loading component like this:

<Loading Condition="Ready">
    <Loading>Show spinner</Loading>
    <Loaded>Show content</Loaded>
</Loading>

Whenever you want a spinner you use that component within your component, and you only care about setting the value to false/true in the Condition parameter.

If you are loading data asynchronously, what you are trying to do is not going to work well, since components render twice, the first time after sync work completes, and a second after async work completes. In your case OnInitialize would look something like:

OnInitializeAsync()
{
   ...
   Data = await GetData();
   Ready = true;
}

Which would more closely match the behavior I suspect you are looking for.

Your loading component would do something like this

@if(!Condition){
@Loading
}else{
@Loaded
}

Finally, to answer your question, there is no way for you to intercept those calls in third-party components. The only components you could do this would be your own components if you extend ComponentBase or implement IComponent and use that base class on them.

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.