Show BusyIndicator while page is loading in MVVM

[Reza Mohamed]

From other forum posts etc I was able to create a method to show the busy indicator, this ShowBusy method is in my BASE VIEWMODEL that I derive all other viewmodels from since I want this piece of code to work in any viewmodel. 

protected void ShowBusy(bool show)
{
    DataTemplate contentTemplateView = new DataTemplate(() =>
    {
        StackLayout stack = new StackLayout();
        _busyIndicator = new SfBusyIndicator();
        _busyIndicator.ViewBoxHeight = 100;
        _busyIndicator.ViewBoxWidth = 100;
        _busyIndicator.IsBusy = true;
        stack.Children.Add(_busyIndicator);
        return stack;
    });
 
    _popupLayout.PopupView.HeaderTitle = string.Empty;
    _popupLayout.PopupView.ContentTemplate = contentTemplateView;
    _popupLayout.PopupView.ShowHeader = false;
    _popupLayout.PopupView.PopupStyle.BorderColor = Color.Transparent;
    _popupLayout.PopupView.ShowFooter = false;
    _popupLayout.PopupView.ShowCloseButton = false;
    _popupLayout.PopupView.AutoSizeMode = AutoSizeMode.Height;
    _popupLayout.PopupView.BackgroundColor = Color.Transparent;
 
    _popupLayout.IsOpen = show;
 
}

There are instances where if a page is already loaded, I can use this code to get my app to work and show the indicator. However, when I want to use this while the page is loading time consuming tasks like API calls etc on navigatedto, this breaks. 

Can you help me on how to use this Indicator in a situation like so (to show busy while page is initially loading etc in MVVM)? In the attached code, there are two pages, in each case I have tried to ShowBusy when the first page loads, and then secondly when navigating to PageB - both fail.

Attachment: PopupAcceptDecline_c9807e4e.zip

[Kanimozhi Gunasekaran]

Hi Reza Mohamed,

Greetings from Syncfusion.

We have checked your requirement “Show SfBusyIndicator while page is loading in MVVM” with provided sample. The attached sample was unable to be deployed, but we have prepared the sample based on your requirement.

Sample Link:
https://www.syncfusion.com/downloads/support/directtrac/general/ze/BusyIndicator_Sample-31079441

Please check with the above sample and let us know if you have any concern on this.

Regards,
Kanimozhi G.

[Reza Mohamed]

I'm sorry, but this is a terrible reply. There was nothing MVVM about the solution you attached at all. You have two views MainPage and Page1, all the code is in the code behind file of these views, that is NOT MVVM.

The issue with my original project was simply that I had forgotten to put SfPopupLayoutRenderer.Init(); in the MainActivity.cs

As far as the issue from the original posting, I created a new MVVM project and attached it here. In this project, if I run it as is, it opens MainPage and then when you click the button to go to PageB, it goes to PageB and also shows the BusyIndicator. Now the issue is if I instead switch the code to start the project with PageB, then the application crashes.

To simulate, in the app.xaml.cs, please comment the MainPage navigation, and uncomment the PageB navigation. (for the error, there has to be other SF components in the xaml page, in this case I attached an Accordion)

//If you start here, and then click the Button to Page B this works
await NavigationService.NavigateAsync("NavigationPage/MainPage");
 
 
//If you start here, you will see a failure
//await NavigationService.NavigateAsync("NavigationPage/PageB");

My question: How do I get the project to work with PageB as the starting xamarin page?

Attachment: PopupAcceptDeclineV2_6b6c58da.zip

[Karthikraja Kalaimani]

Hi Reza,

Thank you for your update.

Regarding : How do I get the project to work with PageB as the starting xamarin page?

We have checked the reported issue “Application crashes in page B”and this is occurs due to you have opened the Popup before application and page is fully initialized, so this time we cannot DecorView from Application’s activity so tends to made crash. To overcome this issue please open the by asynchronously. For more details please refer to the below code example and attached sample.

Code Example,

 

…..
protected async void ShowBusy(bool show) 

{ 

…..
 await Task.Delay(200);
_popupLayout.IsOpen = show; 

}
… 

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/PopupAcceptDeclineV2_6b6c58da_modified-1752139504.zip

Regards,
Karthik Raja 

[Reza Mohamed]

Adding a delay is a terrible way to approach this.

[Karthikraja Kalaimani]

Hi Reza,

We regret to let you know that PopUpView is loaded inside the decor view which is the root view of the application. So when trying to open the Popup before loading the page i.e., when trying to bring the popup into view before completing the size allocation of the MainPage, DecorView is not obtained to load the Popup view at our end. So if you want to overcome this issue please open the popup at LayoutChildren override method of the main page.

Regards, 

Karthik Raja 

[Reza Mohamed]

I am trying to do this in a different way, so I created a Custom Control with the popuplayout and busyindicator as indicated by the code attached.

(1) The customcontrol is a called BusyIndicator, when I try to pass a value (true) to this custom control from MainPage View, the application crashes. Can you help me with this issue?

<controls:BusyIndicator xIsBusy="True" />

This question may be related to an older post, but there was no solution posted that worked there. https://www.syncfusion.com/forums/140846/sfpopuplayout-isopenproperty-crashes-when-set-to-true

(2) I need to set 'True' to open and 'False' to both the IsOpen property of the PopupLayout x:Name"ctrlPopupLayout" as well as the SfBusyIndicator x:Name"ctrlBusyIndicator" - how do I access the IsBusy property of the ctrlBusyIndicator from the codebehind page? 

public BusyIndicator()
{
    InitializeComponent();
 
    ctrlPopupLayout.SetBinding(SfPopupLayout.IsOpenProperty, new Binding("xIsBusy", source: this));
 
    // I cant access ctrlBusyIndicator here:
    ctrlBusyIndicator.SetBinding(SfBusyIndicator.IsBusyProperty, new Binding("xIsBusy", source: this));
}

Attachment: PopupAcceptDeclineJan23_aa730c54.zip

[Deepika Balasubramaniyan]

Hi Reza Mohamed, 

As per our SfPopupLayout architecture, popup has added as child view of DecorView. Here we can get the DecorView after page loading only. But you are trying show the popup before page loading that was in constructor itself. In this case before creating DecorView there is no possible way of adding popup as DecorView children. So when you try to open the popup by updating the IsOpen value through binding or directly set the value application crashed. To overcome this issue as per our previous update you can show the  popup, in LayoutChildren override method of the main page or page Onappearing override that is after page loading. 

We hope this helps to you. 

 

Regards, 

Deepika. 

[Reza Mohamed]

I understand everything that you said, but here is the issue, in the attached sample - the busy indicator control without the popuplayout to show the mask works just fine when called from OnNavigatedTo. However, when I execute the same piece of code with the busy indicator and the popuplayout mask, it breaks. 

So I am asking is this some kind of bug in the popuplayout? Can you update the code and show me how to use the popuplayout in my scenario, please?

To test:

(1) solution as-is will break because it's showing the popuplayout and the busyindicator.

(2) In the MainPageViewModel if you comment the ShowBusy = true; in the OnNavigated to Method and click the Show Dialog button, the busyindicator with the mask will work.

(3) With the ShowBusy = true; in the OnNavigated to Method NOT commented - in the BusyIndcatorControl.xaml, comment out the Popuplayout, and uncomment the BusyIndicator only at the bottom. In the xaml.cs file, comment the ctrlPopupLayout lines and uncomment the ctrlBusyIndicator lines. Execute the project and it works just fine, however, without a background mask for the busyindicator.

I just want to be able to show the busyindicator and a background mask.

Attachment: BusyIndicatorTestsJan27_9b3c9a57.zip

[Karthikraja Kalaimani]

Hi Reza,

Thank you for the update.

We have checked the reported issue “application is crashed while launching the app with SfPopupLayout” and currently we are validating the reported issue  and we will update further details on 30^th Jan 2020.

We appreciate your patience until then.

Regards,
Karthik Raja 

[Reza Mohamed]

Do you have an update for this?

[Karthikraja Kalaimani]

Hi Reza,

Thank you for your patience,

We have checked the reported “crash” issue and we are facing two type of call stack while launching the application. So could you please confirm the call stack from your side?

Call Stack 1 :

 

 

Call Stack 2 :


 

 

Regards,
Karthik Raja 

[Reza Mohamed]

If you are seeing issues as well then can we confirm that there is a problem regardless of what my call stack looks like? What is the workaround/solution?

[Karthikraja Kalaimani]

Hi Reza,

We are going to fix the two know issues and we will fix this issue and include the issue fix in our upcoming weekly nuget which is scheduled on 11th Feb 2020. If incase you are facing a issue apart from two know issues your issue will not resolve. So could you please confirm the call stack details ?

Regards,
Karthik Raja 

[Reza Mohamed]

Confirmed.

[Karthikraja Kalaimani]

Hi Reza,

Thank you for the update.

We have logged the bug report for the issue “Expection thrown while open the popup when page initializing”. We will fix this issue and include the issue fix in our upcoming weekly nuget which is scheduled on 11th Feb 2020. We appreciate your patience until then. 

 

You can also track the status of the report in below feedback link,
https://www.syncfusion.com/feedback/11725/exception-thrown-when-try-to-open-the-popup-on-page-navigation-using-mvvm-prism

Regards,
Karthik Raja 

[Reza Mohamed]

What is the status of this bug fix? It was scheduled to be fixed by Feb 11th?

[Muthu Kumaran Gnanavinayagam]

Hi Reza, 

Sorry for the inconvenience. 

As we have been in the testing phase last week, we couldn’t able to include the fix in last week’s nuget release. We would like to confirm that the fix will be included in our upcoming release which is scheduled to roll out tomorrow(18^th February, 2020). We will appreciate your patience until then. 

Regards, 

G.Muthu kumaran. 

[Muthu Kumaran Gnanavinayagam]

Hi Reza,  

  

We have fixed the mentioned issue “Expection thrown while open the popup when page initializing” and included the issue fix in our weekly NuGet update version 17.4.0.50 which is available for download (nuget.org).   

  

We thank you for your support and appreciate your patience in waiting for this update. Please get in touch with us if you would require any further assistance.  

  

Regards,  

G.Muthu kumaran.  

[Reza Mohamed]

The original bug seems to have been fixed in this latest version. Thanks for that.

I am now running into a different issue with the same exact code/project. When I show the Busy Indicator with a Popup Layout and then close it and show the Prism Dialog Service, I am getting the following error:

It seems to be in the ShowDialog() method.

private async void ShowDialog()
{
    ShowBusy = true;
 
    await Task.Delay(2000);
 
    ShowBusy = false;
    
    _dialogService.ShowDialog("BusyDialog", new DialogParameters() { { "message", "from main view model" } });
}

Attachment: BusyIndicatorTests__after_fix_61e5e085.zip

[Sakthivel Palaniyappan]

Hi Reza,

Thanks for your update.

Currently we are validating the reported issue, we will update the details on 24^th February 2020.

Regards,
Sakthivel P. 

[Sivaraman Sivagurunathan]

Hi Reza, 

 

Sorry for the inconvenience. 

 

Currently we are validating the reported issue, we will update the details on 26th  February 2020. 

 

Regards, 

Sivaraman 

[Sivaraman Sivagurunathan]

Hi Reza, 

 

We have checked the issue and could able to reproduce the issue. We have logged the bug report for the same. The fix for this issue is estimated to be available on 03/12/2020 .  

 

You can also track the status of the report in below feedback link, 

 

https://www.syncfusion.com/feedback/12354/application-crash-when-show-the-dialog-using-showdialog-in-prism-after-show-and 

 

We appreciate your patience until then. 

Regards,
Sivaraman 

[Karthikraja Kalaimani]

Hi Reza,

Sorry for the inconvenience caused.

Due to complexity of the issue. We will fix the issue and provide patch on 16^th March 2020. We appreciate your patience until then.

Regards, 

Karthik Raja 

[Sivaraman Sivagurunathan]

Hi Reza,  

  

We have analyzed the reported issue from our side. In that, you call the ShowDialog method to show the BusyDialog view using DialogService in Prism after showing the SfPopup. We have used ObjectAnimator in SfPopupLayout to animate the popup and default animation duration is 200 milliseconds. When you call the ShowDialog method to show the BusyDialog view the popup view animation have not complete yet. Thus the popup view tries to layout and throws exception. To overcome the issue you have to set 200 milliseconds delay before calling the ShowDialog method to show the BusyDialog or else you have to set the AnimationDuration as “0” for SfPopup. 

Solution 1: 

Set delay before shoe the BusyDialog. 

private async void ShowDialog() 

{ 

    ShowBusy = true; 

    await Task.Delay(2000); 

    ShowBusy = false; 

    await Task.Delay(200); 

    _dialogService.ShowDialog("BusyDialog", new DialogParameters() { { "message", "from main view model" } }); 

} 

Else you have to set the AnimationDuration as “0” for SfPopupLayout.PopupView. 

Solution 2: 

<popuplayout:SfPopupLayout.PopupView> 

    <popuplayout:PopupView 

    BackgroundColor="Transparent" 

    ShowCloseButton="False" 

    ShowFooter="False" 

    ShowHeader="False" 

    AnimationDuration="0"> 

 

        <popuplayout:PopupView.PopupStyle> 

            <popuplayout:PopupStyle BorderColor="Transparent"/> 

        </popuplayout:PopupView.PopupStyle> 

 

        <popuplayout:PopupView.ContentTemplate> 

            <DataTemplate> 

                <xForms:SfBusyIndicator 

                x:Name="ctrlBusyIndicator" 

                AnimationType="Ball" 

                IsBusy="True" 

                ViewBoxHeight="125" 

                ViewBoxWidth="125" /> 

            </DataTemplate> 

        </popuplayout:PopupView.ContentTemplate> 

    </popuplayout:PopupView> 

</popuplayout:SfPopupLayout.PopupView> 

Regards,  

Sivaraman S