Run loading UI in WPF while calling web api?

See more:

WPF

Hey guys,
another day, another problem.
In my project (wpf, c#, framework 4.5) i have a login window.
as usual, it request for a username and a password.
after pressing the submit button, i have:
1. a method that check if the user enter username as well as password.
2. if so, calls a web api (goes back as json) to get the user details and check if ther is a match between the username and password.

somtimes it takes a half second to do that, somtimes it takes more then 3 sec.
during that 1 & 2 above, i want to load a user control calls "LoadingAnimation" that show the regular loading animation as we all know it and in the same time set the opacity of another grid (which include the rest of the ui) to 0 (see: "FadeOutGrid").
after getting back the result from the webApi methode, i want to set the grid back to 1 (see:"FadeInGrid") anf remove the "LoadingAnimation" control.

this is the code after pressing the submit button:

private void btnLogIn_Click(object sender, RoutedEventArgs e)
      {
          ucLoading = new UserControls.LoadingAnimation();
          ucLoading.Margin = new Thickness(0, 170, 0, 0);
          BackgroundWorker bw = new BackgroundWorker();

          bw.DoWork += (sender2, evebtArgs2) =>
          {
              this.Dispatcher.BeginInvoke((Action)(() =>
              {
                  EWStoryBoards.FadeOutGrid(grd, grdTransform);
                  this.UpdateLayout();
                  grdFlip.Children.Add(ucLoading);
                  this.UpdateLayout();
              }));
          };
          bw.RunWorkerAsync();
          HandleLogin();
      }

This is the animations:

public static void FadeOutGrid(Grid grd, TranslateTransform tt, Action completed = null, double SlideFromSec = 1, double SlideSpeed = 1.5, double OpacitySpeed = 5)
       {
           var animation = new DoubleAnimation(0, (Duration)TimeSpan.FromSeconds(1));
           animation.SpeedRatio = OpacitySpeed;
           if (completed != null) animation.Completed += (o, e) => completed();
           grd.BeginAnimation(UIElement.OpacityProperty, animation);
       }

       public static void FadeInGrid(Grid grd, Action completed = null, double SlideFromSec = 1, double SlideSpeed = 1.5, double OpacitySpeed = 5)
       {
           var animation = new DoubleAnimation(1, (Duration)TimeSpan.FromSeconds(1));
           animation.SpeedRatio = OpacitySpeed;
           if (completed != null) animation.Completed += (o, e) => completed();
           grd.BeginAnimation(UIElement.OpacityProperty, animation);
       }

How am i suppouse to do that? how am i suppous to push the loading ui even for a half of second?
Thanks!

What I have tried:

....................................................................................................................................