System.InvalidOperationException: 'The render handle is not yet assigned.' in Blazor server

I have created a simple Blazor application and I need to show a loading screen on the index.razor page. I am not needed to include it on the index.razor page. I am using some indirect way to do it.

First I have created a one class called Appsettings.cs and brought the loading logic inside it

Appsettings.cs

public class AppSettings    {        public static bool _IsProcessing { get; set; } = false;        public static MainLayout _layout { get; set; } = new MainLayout();        public static void Loading(bool isProcessing)        {            _IsProcessing = isProcessing;            if(_layout !=null)               _layout .LoadingScreenShowing(_IsProcessing);        }    }

Then my index.razor file is like this, when press the below Load button, I need to show the Loading screen.

index.razor

<button onclick="PageLoading">Load</button>@code{  protected override void Oninitialized(){}  private void PageLoading(){     AppSettings.Loading(true);     this.StateHasChanged();     //do something     AppSettings.Loading(false);     this.StateHasChanged();  }

After I have included loading part into the MainLayout.razor not explicitly to the index.razor.

MainLayout.razor

@inherits LayoutComponentBase<PageTitle>BlazorApp1</PageTitle><div class="page"><div class="sidebar"><NavMenu /></div><main><div class="top-row px-4"><a href="https://learn.microsoft.com/aspnet/" target="_blank">About</a></div><article class="content px-4"><Loading IsVisible="@IsLoading" @ref="load"/>  //loading component             @Body</article></main></div>

And I've created a partial class to place the functional part of the main layout.

MainLayout.razor.cs

public partial class MainLayout{        private bool IsLoading;        Loading load ;        public async void LoadingScreenShowing(bool isLoading)        {            load = new Loading();            IsLoading = isLoading;            this.StateHasChanged();//exception is throwing from this line             await Task.CompletedTask;        }}

When execute the this.StateHasChanged() line, I am getting the exception called

System.InvalidOperationException: 'The render handle is not yetassigned.'

Why is this occurring?