Proper way to load data on navigation to ModalPage/Page

[AndreasReitberger]

I'm developing a simple app at the moment. The app calls a modal page to show information of an Item object. The navigation happens with the Shell class.

_ = await Shell.Current.GoToAsync(ShellRoute.ViewCourseModalPage, new()
{
    { "course", course },
}, false);     

So far so good. However it takes about 4-6 seconds on each platform till the View is actually shown. So I tried some things, however I was not able to show the View and then load the data. It always loads the data first, and presents the page afterwards.
Tested with net7 and net8, same behaviour.

This is the class of my ModalView

using AppBasement.ViewModels.Modals;

namespace AppBasement.Views.Modals;

public partial class ViewCourseModalPage : ContentPage
{
    public ViewCourseModalPage(ViewCourseModalPageViewModel viewModel)
    {
        InitializeComponent();
        BindingContext = viewModel;

        Loaded += ((ViewCourseModalPageViewModel)BindingContext).Pages_Loaded;
    }
    ~ViewCourseModalPage()
    {
        Loaded -= ((ViewCourseModalPageViewModel)BindingContext).Pages_Loaded;
    }

    #region Methods
    protected override void OnAppearing()
    {
        base.OnAppearing();
        try
        {
            ((ViewCourseModalPageViewModel)BindingContext).OnAppearing();
        }
        catch (Exception) { }
    }

    protected override void OnDisappearing()
    {
        base.OnDisappearing();
        try
        {
            ((ViewCourseModalPageViewModel)BindingContext).OnDisappearing();
        }
        catch (Exception) { }
    }

    // Disable Android Back Button
    protected override bool OnBackButtonPressed() => false;
    #endregion
}

And this the ViewModel behind it.

using AndreasReitberger.Courses;
using AppBasement.Models.Dispatch;
using AppBasement.Models.EventLogger;
using AppBasement.Models.Settings;
using AppBasement.Models.Singleton;
using CommunityToolkit.Mvvm.ComponentModel;
using CommunityToolkit.Mvvm.Input;
using System.Diagnostics;
using AndreasReitberger.Shared.Core.Utilities;

namespace AppBasement.ViewModels.Modals
{

    [QueryProperty(nameof(Course), "course")]
    public partial class ViewCourseModalPageViewModel : AppViewModel
    {
        #region QueryParameter
        [ObservableProperty]
        Course course;
        #endregion

        #region Constructor, LoadSettings

        public ViewCourseModalPageViewModel(IDispatcher dispatcher) : base(dispatcher)
        {
            Dispatcher = dispatcher;

            IsLoading = true;
            LoadSettings();
            IsLoading = false;
        }
        new void LoadSettings()
        {
            IsDemoModeOn = SettingsApp.DemoMode_Enabled;
            ShowWikiUris = SettingsApp.General_ShowWikiUris;
            ShowTitleInBar = SettingsApp.General_ShowTitlesInBar;
        }
        #endregion

        #region Commands

        #region Save

        [RelayCommand]
        Task Save() => Back();

        #endregion

        #region Refreshing
        bool RefreshCommand_CanExcecute() => !IsRefreshing;
        [RelayCommand(CanExecute = nameof(RefreshCommand_CanExcecute))]
        async Task Refresh()
        {
            try
            {
#if PerformanceCheck
                Stopwatch watch = new();
                string methodName = $"{nameof(ViewCourseModalPageViewModel)}.{nameof(Refresh)}";
                StopWatchHelper.Start(Dispatcher, ref watch, methodName, EventManager.Instance);
#endif
                if (Course != null)
                {
                    await RefreshCourseDataAsync();
                }
#if PerformanceCheck
                StopWatchHelper.Stop(Dispatcher, ref watch, methodName, EventManager.Instance);
                watch = null;
#endif
            }
            catch (Exception exc)
            {
                // Log error
                EventManager.Instance.LogError(exc);
            }
            DispatchManager.Dispatch(Dispatcher, () => IsRefreshing = false);
        }

        [RelayCommand]
        async Task Participate()
        {
            try
            {
#if PerformanceCheck
                Stopwatch watch = new();
                string methodName = $"{nameof(ViewCourseModalPageViewModel)}.{nameof(Participate)}";
                StopWatchHelper.Start(Dispatcher, ref watch, methodName, EventManager.Instance);
#endif
                await ParticipateItem(Course);
#if PerformanceCheck
                StopWatchHelper.Stop(Dispatcher, ref watch, methodName, EventManager.Instance);
                watch = null;
#endif
            }
            catch (Exception exc)
            {
                // Log error
                EventManager.Instance.LogError(exc);
            }
            DispatchManager.Dispatch(Dispatcher, () => IsRefreshing = false);
        }
        #endregion

        #endregion

        #region Methods

        async Task RefreshCourseDataAsync()
        {
            try
            {
                if (Course != null)
                {

                }
            }
            catch (Exception exc)
            {
                // Log error
                EventManager.Instance.LogError(exc);
            }
        }

        #endregion

        #region LifeCycle
        /// <summary>
        /// Runs once when the page is created (gets triggered after the 'OnAppearing' function.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        public new void Pages_Loaded(object sender, EventArgs e)
        {
#if PerformanceCheck
            Stopwatch watch = new();
            string methodName = $"{nameof(ViewCourseModalPageViewModel)}.{nameof(Pages_Loaded)}";
            StopWatchHelper.Start(Dispatcher, ref watch, methodName, EventManager.Instance);
#endif
            Task.Run(OnLoadedAsync);         
#if PerformanceCheck
            StopWatchHelper.Stop(Dispatcher, ref watch, methodName, EventManager.Instance);
            watch = null;
#endif
        }

        new async Task OnLoadedAsync()
        {
            try
            {
#if PerformanceCheck
                Stopwatch watch = new();
                string methodName = $"{nameof(ViewCourseModalPageViewModel)}.{nameof(OnLoadedAsync)}";
                StopWatchHelper.Start(Dispatcher, ref watch, methodName, EventManager.Instance);
#7284 
                if (AppData.DataChanged)
                {
                    await Task.Run(base.OnLoadDataAsync);
                    await Task.Run(Refresh);
                }
                else
                {
                    await DispatchManager.DispatchAsync(Dispatcher, UpdateFromInstanceData);
                    // Load image from the currently selected file
                    if (Course != null)
                    {
                        await DispatchManager.UpdateInNewTaskAsync(RefreshCourseDataAsync);
                    }
                }
#if PerformanceCheck
                StopWatchHelper.Stop(Dispatcher, ref watch, methodName, EventManager.Instance);
                watch = null;
#endif
            }
            catch (Exception exc)
            {
                // Log error
                EventManager.Instance.LogError(exc, forceReport: true);
            }
        }

        public void OnAppearing()
        {
            try
            {
#if PerformanceCheck
                Stopwatch watch = new();
                string methodName = $"{nameof(ViewCourseModalPageViewModel)}.{nameof(OnAppearing)}";
                StopWatchHelper.Start(Dispatcher, ref watch, methodName, EventManager.Instance);
#endif
                DispatchManager.Dispatch(Dispatcher, () => IsBusy = true);
                LoadSettings();

                if (AppData.DataChanged)
                {
                    Task.Run(OnLoadDataAsync);
                }
                else
                {
                    UpdateFromInstanceData();
                }
#if PerformanceCheck
                StopWatchHelper.Stop(Dispatcher, ref watch, methodName, EventManager.Instance);
                watch = null;
#endif
            }
            catch (Exception exc)
            {
                // Log error
                EventManager.Instance.LogError(exc);
            }
            DispatchManager.Dispatch(Dispatcher, () => IsBusy = false);
            IsStartUp = false;
        }
        #endregion
    }
}

This is the output when the navigation happens on Android. From the click to open the page, till the page is presented fully.

[0:] Microsoft.Maui.Controls.Element: Warning: Microsoft.Maui.Controls.SolidColorBrush is already a child of AppBasement.Views.DashboardPage. Remove Microsoft.Maui.Controls.SolidColorBrush from AppBasement.Views.DashboardPage before adding to AppBasement.Views.Modals.ViewCourseModalPage.
[0:] Microsoft.Maui.Controls.Element: Warning: Microsoft.Maui.Controls.SolidColorBrush is already a child of Microsoft.Maui.Controls.ContentView. Remove Microsoft.Maui.Controls.SolidColorBrush from Microsoft.Maui.Controls.ContentView before adding to Microsoft.Maui.Controls.ContentView.
[0:] Microsoft.Maui.Controls.BindableObject: Warning: Cannot convert Microsoft.Maui.Controls.Style to type 'Microsoft.Maui.Controls.Shadow'
[tberger.vhscham] Explicit concurrent copying GC freed 2481(248KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 5467KB/10MB, paused 698us,59us total 24.185ms
[OnBackInvokedCallback] OnBackInvokedCallback is not enabled for the application.
[OnBackInvokedCallback] Set 'android:enableOnBackInvokedCallback="true"' in the application manifest.
[0:] Performance: Start => AppViewModel.ViewItem: 10/29/2023 9:16:50 AM)
[Choreographer] Skipped 33 frames! The application may be doing too much work on its main thread.
[EGL_emulation] app_time_stats: avg=313.89ms min=11.01ms max=5082.20ms count=17
[0:] Performance: Start => ViewCourseModalPageViewModel.OnAppearing: 10/29/2023 9:16:50 AM)
[0:] Performance: Start => AppViewModel.UpdateFromInstanceData: 10/29/2023 9:16:50 AM)
[0:] Performance: Done => AppViewModel.UpdateFromInstanceData: 10/29/2023 9:16:50 AM (Duration: 00:00:00.0006236)
[0:] Performance: Done => ViewCourseModalPageViewModel.OnAppearing: 10/29/2023 9:16:50 AM (Duration: 00:00:00.0474678)
[tberger.vhscham] Explicit concurrent copying GC freed 3014(188KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 5950KB/11MB, paused 371us,59us total 17.374ms
[tberger.vhscham] Explicit concurrent copying GC freed 1214(73KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 5972KB/11MB, paused 361us,60us total 13.364ms
[tberger.vhscham] Explicit concurrent copying GC freed 990(60KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 5992KB/11MB, paused 378us,63us total 13.874ms
[tberger.vhscham] Explicit concurrent copying GC freed 407(42KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 5997KB/11MB, paused 587us,62us total 20.550ms
[tberger.vhscham] Explicit concurrent copying GC freed 1058(60KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 5953KB/11MB, paused 369us,60us total 10.742ms
[tberger.vhscham] Explicit concurrent copying GC freed 1079(62KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 5971KB/11MB, paused 359us,60us total 10.474ms
[tberger.vhscham] Explicit concurrent copying GC freed 1001(60KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 5991KB/11MB, paused 439us,60us total 10.909ms
[tberger.vhscham] Explicit concurrent copying GC freed 1001(60KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 6011KB/11MB, paused 503us,168us total 12.235ms
[tberger.vhscham] Explicit concurrent copying GC freed 1001(59KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 6031KB/11MB, paused 367us,59us total 11.140ms
[tberger.vhscham] Explicit concurrent copying GC freed 1002(59KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 6051KB/11MB, paused 363us,59us total 10.591ms
[tberger.vhscham] Explicit concurrent copying GC freed 1139(69KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 6078KB/11MB, paused 375us,61us total 10.985ms
[tberger.vhscham] Explicit concurrent copying GC freed 366(34KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 6092KB/11MB, paused 384us,61us total 12.190ms
[tberger.vhscham] Explicit concurrent copying GC freed 376(32KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 6107KB/11MB, paused 362us,59us total 10.765ms
[tberger.vhscham] Explicit concurrent copying GC freed 5545(260KB) AllocSpace objects, 0(0B) LOS objects, 49% free, 6167KB/12MB, paused 372us,64us total 11.097ms
[0:] Performance: Start => ViewCourseModalPageViewModel.Pages_Loaded: 10/29/2023 9:16:51 AM)
[0:] Performance: Done => ViewCourseModalPageViewModel.Pages_Loaded: 10/29/2023 9:16:51 AM (Duration: 00:00:00.0003215)
[0:] Performance: Start => ViewCourseModalPageViewModel.OnLoadedAsync: 10/29/2023 9:16:51 AM)
[Choreographer] Skipped 205 frames! The application may be doing too much work on its main thread.
[EGL_emulation] app_time_stats: avg=3669.23ms min=3669.23ms max=3669.23ms count=1
[OpenGLRenderer] Davey! duration=3664ms; Flags=0, FrameTimelineVsyncId=22774, IntendedVsync=6240687758412, Vsync=6240904425070, InputEventId=0, HandleInputStart=6240907207100, AnimationStart=6240907230600, PerformTraversalsStart=6240907559700, DrawStart=6244207913400, FrameDeadline=6240721091744, FrameInterval=6240907185800, FrameStartTime=16666666, SyncQueued=6244310903400, SyncStart=6244311134000, IssueDrawCommandsStart=6244311383500, SwapBuffers=6244347464900, FrameCompleted=6244352006400, DequeueBufferDuration=26300, QueueBufferDuration=4059100, GpuCompleted=6244351822400, SwapBuffersCompleted=6244352006400, DisplayPresentTime=81604378632, CommandSubmissionCompleted=6244347464900,
[0:] Performance: Start => AppViewModel.UpdateFromInstanceData: 10/29/2023 9:16:54 AM)
[OpenGLRenderer] Davey! duration=3450ms; Flags=0, FrameTimelineVsyncId=22781, IntendedVsync=6240921091736, Vsync=6244337758266, InputEventId=0, HandleInputStart=6244345835500, AnimationStart=6244345857600, PerformTraversalsStart=6244351615900, DrawStart=6244352045900, FrameDeadline=6244371091598, FrameInterval=6244345723200, FrameStartTime=16666666, SyncQueued=6244354274800, SyncStart=6244354803000, IssueDrawCommandsStart=6244354947500, SwapBuffers=6244359190700, FrameCompleted=6244371683600, DequeueBufferDuration=3033400, QueueBufferDuration=228800, GpuCompleted=6244371683600, SwapBuffersCompleted=6244365218300, DisplayPresentTime=687194767360, CommandSubmissionCompleted=6244359190700,
[0:] Performance: Done => AppViewModel.UpdateFromInstanceData: 10/29/2023 9:16:54 AM (Duration: 00:00:00.0005432)
[0:] Performance: Done => ViewCourseModalPageViewModel.OnLoadedAsync: 10/29/2023 9:16:54 AM (Duration: 00:00:03.4474336)
[0:] Performance: Done => AppViewModel.ViewItem: 10/29/2023 9:16:54 AM (Duration: 00:00:04.3422498)

There is no heavy data loading happening, just passing an object to it and load it to display it. Maybe someone has a suggestion to improve this? The intended behaviour would be, the page is shown and then the data loading is happening while the IsBusy indicatior is showing work.

[FM1973]

Hi @AndreasReitberger.
We already have a discussion about this "problem".
Look there... #9248

[AndreasReitberger]

Hi, thanks for the link. I made an issue out of this, because this is a bug in my opinion.
#18445