How to implement loading page when navigating?

[dzebas]

Hi,

Currently in our app just before pushing new page we display loading page with an activity indicator using Mopups. Once page is fully loaded then we hide loading page. It works well as it allows to disable back button on Android etc., but lately started having issues in both Android/iOS.

I want to come up with another solution, hopefully without third party packages. I tried using CommunityToolkit Popup, but the way it has been implemented doesn't work while navigating - Maui popup is added to modal stack, so page pushed after is added to modal stack as well, so no good.

Has anyone found a way to achieve this?

[MichaelShapiro]

I override the OnBackButtonPressed() event in the ContentPage. Whenever I have a "long running" operation and the activity indicator is shown I will catch back button press (on Android) and ignore it. Not sure how applicable it might be in your case though,

[dzebas]

@MichaelShapiro , thank you, I'm already disabling OnBackButtonPressed, but I need to disable all other UI elements and also main TabBar. Other than adding overlay window on top of everything I don't know any other way.

[asi-evin]

Would the LazyView from the community toolkit be helpful?

https://learn.microsoft.com/en-us/dotnet/communitytoolkit/maui/views/lazyview

[stephenquan]

Have you tried CommunityToolkit.Maui's Toast?

[Xynratron]

In my opinion there should be no "Loading-Screen" between Page Navigations. This sounds like a "we load to much, we need more time".

For the Users, you need a reponse within ~200-500ms - otherwise there will be a new Tap on the Command to get things done. It's the same problem for decades: don't do things in the EventHandler wich blocks UI. Rougthly 60FPS -> Eventhandler has to finish in 1/60 seconds. Otherwise the UI looks like "not responsible" for the user. Maybe you can do a 1/24 and it seems ok.

Present the new Page ASAP and load the data later (Event OnApperaing?). The user will see a response and (his brain) need time to process the new information. Load the missing data to present it to the user. DO NOT let the user wait some seconds!

:-) Xynratron

[stephenquan]

I agree with this approach. We saw significant improvements after removing work from the constructor and deferring initialization as late as possible. Once we shifted that logic out of the constructor, the page loaded more smoothly and the overall behavior became more predictable.

[dzebas]

Thank you @Xynratron and @stephenquan

The way we load data currently is via IQueryAttributable method ApplyQueryAttributes. We have a big enterprise app so pages are quite complex with multiple tabs etc. (some tabs we do lazy loading). Our so called 'object' pages has two modes - view and edit, so while data is not fully loaded we don't want users to be abled to edit that particular page and currently display popup until data is fetched from the server.

Will need to investigate if can get rid of popup all together, perhaps disable edit buttons until data is fully loaded.

[stephenquan]

Definitely capture the "work to be done" so that ApplyQueryAttributes can trigger it, but it doesn't all need to run immediately. Deferring the actual work until the page is ready often leads to smoother behavior and fewer timing issues. For example:

void ApplyQueryAttributes(IDictionary<string, object> query)
{
    Dispatcher.Dispatch(async () => await ApplyQueryAttributesAsync(query));
}

async Task ApplyQueryAttributesAsync(IDictionary<string, object> query)
{
    // ...
}

[dzebas]

Thank you @stephenquan ! I'm thinking refactoring our app and moving away from fetching data in ApplyQueryAttributesAsync and perhaps do this in OnNavigatedTo method instead.

[stephenquan]

Also note the purpose of the Dispatcher.Dispatch() call: it schedules the work to run on the next UI cycle, after MAUI has completed the page‑navigation transition and processed any pending UI updates.

[dzebas]

I would like to show activity indicator while data is loading, but can't find a way how to inject it to all my pages as I don't want to do this on each page manually (we have a lot of pages in our app).