We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Show BusyIndicator while page is loading in MVVM

Thread ID:

Created:

Updated:

Platform:

Replies:

150719 Jan 17,2020 02:35 AM UTC Mar 16,2020 01:38 PM UTC Xamarin.Forms 24
loading
Tags: SfPopup
Reza Mohamed
Asked On January 17, 2020 02:35 AM UTC

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 [Syncfusion]
Replied On January 17, 2020 06:09 PM UTC

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
Replied On January 21, 2020 11:40 PM UTC

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 [Syncfusion]
Replied On January 22, 2020 03:48 PM UTC

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;
 
}
 


Reza Mohamed
Replied On January 22, 2020 03:56 PM UTC

Adding a delay is a terrible way to approach this.

Karthikraja Kalaimani [Syncfusion]
Replied On January 23, 2020 01:55 PM UTC

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
Replied On January 25, 2020 08:25 PM UTC

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 [Syncfusion]
Replied On January 27, 2020 05:09 PM UTC

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
Replied On January 28, 2020 12:51 AM UTC

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 [Syncfusion]
Replied On January 28, 2020 02:39 PM UTC

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 30th Jan 2020.

We appreciate your patience until then.

Regards,
Karthik Raja
 


Reza Mohamed
Replied On January 30, 2020 02:47 PM UTC

Do you have an update for this?

Karthikraja Kalaimani [Syncfusion]
Replied On January 30, 2020 02:48 PM UTC

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
Replied On January 30, 2020 02:51 PM UTC

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 [Syncfusion]
Replied On January 31, 2020 01:49 PM UTC

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
Replied On January 31, 2020 02:19 PM UTC

Confirmed.

Karthikraja Kalaimani [Syncfusion]
Replied On February 3, 2020 10:15 AM UTC

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
Replied On February 17, 2020 03:50 AM UTC

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

Muthu Kumaran Gnanavinayagam [Syncfusion]
Replied On February 17, 2020 12:46 PM UTC

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(18th February, 2020). We will appreciate your patience until then. 

Regards, 
G.Muthu kumaran. 


Muthu Kumaran Gnanavinayagam [Syncfusion]
Replied On February 18, 2020 01:26 PM UTC

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
Replied On February 18, 2020 10:03 PM UTC

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 [Syncfusion]
Replied On February 20, 2020 01:45 PM UTC

Hi Reza,

Thanks for your update.

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

Regards,
Sakthivel P. 


Sivaraman Sivagurunathan [Syncfusion]
Replied On February 24, 2020 02:00 PM UTC

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 [Syncfusion]
Replied On February 26, 2020 01:09 PM UTC

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, 
 
 
We appreciate your patience until then. 

Regards,
Sivaraman
 


Karthikraja Kalaimani [Syncfusion]
Replied On March 12, 2020 01:00 PM UTC

Hi Reza,

Sorry for the inconvenience caused.

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

Regards, 
Karthik Raja 


Sivaraman Sivagurunathan [Syncfusion]
Replied On March 16, 2020 01:38 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon