Feature suggestion: An event when all components in a page have completed initialization

[DavidThielen]

I was on a website the other day where the dashboard was 12 applets displaying different info. And when the page came up it had an overlay over each of the 12 with the loading spinning circle. It looked awful. And I thought, what a lousy job programming - there should be one overlay over the entire page until all the applets complete.

But... I can see why that is done. I have a sepcific use case where my dashboard page has no OnInitializedAsync() method as the page itself has nothing. But it has 4 components and each of those hits the database to read in the data it displays. And so I'm working right now to wire up some communication system between the parent and the children where the children notify the parent when they have completed initializing and the parent tracks the status of all of them. It's a mess. Especially as OnAfterRenderAsync() can fire for the parent before OnInitializedAsync() fires for the children.

If instead there was an event that was fired when all components on a page have returned from OnInitializedAsync(), and for completeness, a second event when all have returned from OnAfterRenderAsync(), that would make handling cases like this very easy.

And I think use cases like this are common. The "Loading..." is the most obvious one, but there are numerous others.

thanks - dave

[adaris-it]

You could solve this by wrapping all applets into a custom <LoadingIndicator> component which cascades down using to its children using <CascadingValue Value="@this">. Then on the children just implement a [CascadingParameter] for the LoadingIndicator, which exposes two methods:

• BeginLoading()
• EndLoading()

Internally on the LoadingIndicator class you could keep a "loading count", and then display your overlay if loadingCount>0 and hide it if loadingCount==0.

Hope this makes sense to you. I have successfully solved it like that.