I am trying to improve the user experience of my app by showing loading indicators while it retrieves data from a server, but there seems to be something wrong with my understanding of how the lifecycle events fire.
On app launch, I direct users to a Landing page component with a loading spinner whilst it preloads some stuff from a server, before redirecting users to a Dashboard page component.
What I'd like it to do is open the Dashboard page as instantly as possible, with the default content being a loading spinner.
The content side of things I have no problem with.
`OnInitializedAsync' does nothing much. It is at this point that I would expect the user interface to be rendered to the user. But it doesn't.
protected override async Task OnInitializedAsync(){ Quote = CommonFunctions.RandomQuote(); _pageHistoryService.AddPageToHistory("/dashboard");}I also have an OnAfterRenderAsync method. This method I would expect to run in the background after the page has loaded.
protected override async Task OnAfterRenderAsync(bool firstRender){ if (firstRender) { GetData(); using var timer = new PeriodicTimer(TimeSpan.FromSeconds(15)); while (!_timerCancellationToken.IsCancellationRequested && await timer.WaitForNextTickAsync()) { GetData(); } return; }}In reality, the UI doesn't display the DOM until after the OnAfterRenderAsync method is completed. Which doesn't make any sense to me.
Is there something I am misunderstanding, or some setting or parameter I need to set in order to get the behaviour I want?