Hide/Unhide XAML Elements With Button Clicked

Question

I've been trying to implement this ActivityIndicator when I make a WebService request. I've come through a couple of different solutions, and I'm trying the simplest one, as shown here:

https://www.youtube.com/watch?v=FmX4RD2iyWw

Well, it's not working for me. It seems to me that it is not accepting the new value I want to give the variable. When I set the IsVisible variable to true by code I can see the spinning circle there, however, when I set the variable to false and click the button nothing happens. Also, there should be an "empty" space corresponding to the element which is not there.

Any help would be mostly appreciated.

Thanks a lot!

LoginPage.xaml :

<ContentPage.Content>
  <StackLayout>
    <ActivityIndicator x:Name="activityIndicator" IsVisible="false" IsRunning="True" WidthRequest="30" HeightRequest="30"/>
  </StackLayout>
</ContentPage.Content>

<Button Text="Sign In" Clicked="SignIn" />

LoginPage.xaml.cs :

void SignIn(object sender, EventArgs e)
  {
    activityIndicator.IsVisible = true;
    Method();
    activityIndicator.IsVisible = false;
  }

Answer 1

With the help of the comments, I have made some minor changes that got it working. I believe a await command was one of the details I was missing. I'm not sure if this is the best solution though. I'm pretty sure I should be using some kind of flag for this, but I still can't do this.

Below follows two solutions:

1. By setting the IsVisible property to FALSE, you manage to hide the ActivityIndicator with no space reserved for the element

LoginPage.xaml :

<ContentPage.Content>
  <StackLayout>
    <ActivityIndicator x:Name="activityIndicator" IsVisible="false" IsRunning="True" WidthRequest="30" HeightRequest="30"/>
    <Button Text="Sign In" Clicked="SignIn" />
  </StackLayout>
</ContentPage.Content>

LoginPage.xaml.cs :

async void SignIn(object sender, EventArgs e)
  {
    activityIndicator.IsVisible = true;
    await Task.Delay(500);
    Method();
    activityIndicator.IsVisible = false;
  }

2. By setting the IsRunning property to FALSE, you manage to hide the ActivityIndicator and leave a reserved space for the element

LoginPage.xaml :

<ContentPage.Content>
  <StackLayout>
    <ActivityIndicator x:Name="activityIndicator" IsVisible="True" IsRunning="False" WidthRequest="30" HeightRequest="30"/>
    <Button Text="Sign In" Clicked="SignIn" />
  </StackLayout>
</ContentPage.Content>

LoginPage.xaml.cs :

async void SignIn(object sender, EventArgs e)
  {
    activityIndicator.IsRunning = true;
    await Task.Delay(500);
    Method();
    activityIndicator.IsRunning = false;
  }