render a blazor component with disabled property set after business logic applied

Question

I have a problem regarding the rendering of a component with a certain property after applying some business logic. The webpage should follow this logic:

1. customer enters page
2. OnInitializedAsync() is called
3. loading circle appears signaling business logic is applied
4. business logic applies and properties are set
5. Visibility property is set and function is left
6. components are rendered with certain properties and shown to customer

To be more specific, it is a certain ComboBox that should have a disabled property after the logic has applied. After calling OnInitializedAsync() the property is set which I confirmed using debugger. However the ComboBox appears with an enabled status as if the property setting is ignored for some reason.

I tried Task.Delay() and StateHasChanged at the end of OnInitializedAsync(). I also tried using OnAfterRenderAsync() and setting the proeprty there with calling StateHasChanged but no difference.

The only way I can make it work is removing the @if(isVisible) check at the top of my razor Page. In that case the disabled property is applied, however the customer gets to see the components before they are "ready" and even has time to interact with them since there is a huge delay. This looks stupid and feels unprofessional. Could you explain to me how the general or best approach would be to this problem?

Here is a rough pseudocode:

@if(isVisible)
{
    <ComboBox @ref=MyComboBox ...></ComboBox>
}

@code
{
    private ComboBox MyComboBox {get;set;}
    private bool isVisible = false;

    protected override OnInitializedAsync()
    {
        "Do Some Stuff"
        this.MyComboBox.Enabled = false;
        this.isVisible = true;
        StateHasChanged();
    }
}

Answer 1

The issue you're encountering stems from the fact that the ComboBox component isn't rendered until isVisible is set to true. Because isVisible is initially false, the ComboBox is not yet part of the component tree, and consequently, MyComboBox remains null when you attempt to modify its properties (such as setting Enabled = false). Try to create a property IsComboEnabled and set to component:

@if(isVisible)
{
    <ComboBox enabled="@IsComboEnabled" ...></ComboBox>
}

Also, I suggest handling this kind of problems using OnAfterRender instead of OnInitializedAsync to enhance the user experience. This way, you can display a spinner while the business logic is executing, rather than having the user wait for the entire page to load.