title: How to center activity indicator overlay NativeScript
body: <h3>My Problem</h3>
  
  <p>After many hours of trial and error, I finally got my page to look the way I wanted. However, now I am trying to add an Activity Indicator spinner while the page loads, and I am having a heck of time getting it to even display.</p>
  
  <p><strong>Here is the page I am referring to:</strong>
  <a href="https://i.stack.imgur.com/NBTQx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NBTQx.png" alt="My Page"></a></p>
  
  <p>The bottom button is fixed, and will not scroll. I think this is part of my problem.</p>
  
  <h3>My XML</h3>
  
  <pre><code>&lt;Page loaded="pageLoaded" class="page"
      xmlns="http://www.nativescript.org/tns.xsd"&gt;
      &lt;ActionBar class="action-bar customActionBar" &gt;
          &lt;NavigationButton ios:visibility="collapsed" icon="res://menu" tap="onDrawerButtonTap"&gt;&lt;/NavigationButton&gt;
          &lt;ActionItem icon="res://navigation/menu" 
              android:visibility="collapsed" 
              tap="onDrawerButtonTap"
              ios.position="left"&gt;&lt;/ActionItem&gt;
          &lt;Label class="action-bar-title" text="Signup"&gt;&lt;/Label&gt;
      &lt;/ActionBar&gt;
      &lt;DockLayout width="100%" height="100%" backgroundColor="lightgray" class="page-gradient"
          stretchLastChild="false"&gt;
          &lt;Button id="signUpButton" class="submitButton h2 border" text="{{ showDetails ? 'Hide' : 'Next' }}" height="60" dock="bottom"
              tap="onSignupButtonTap" returnKeyType="next"/&gt;
          &lt;!-- content --&gt;
          &lt;StackLayout dock="top" width="100%" height="75" &gt;
              &lt;Image class="" src="~/images/signup/step-1-on.png" stretch="fill" /&gt;
              &lt;Image style="margin-top: 15"  src="~/images/signup/progress.png" stretch="fill" /&gt;
          &lt;/StackLayout&gt;
          &lt;ScrollView&gt;
              &lt;StackLayout class=""&gt;
                  &lt;Label text="Choose Your Program" class="h3 ChooseHeader" width="100%"/&gt;
                  &lt;Image src="~/images/chooseYourCourse/diabetes.png" 
          stretch="aspectFit" 
          class="productImage  "
          tap="onDiabetesTap"
          id="diabetes"
          name="diabetes"&gt;&lt;/Image&gt;
                  &lt;Image src="~/images/chooseYourCourse/generalHealth.png" 
              stretch="aspectFit" 
              class="productImage "
              tap="tapGeneral" borderRadius="30" borderStyle="solid"&gt;&lt;/Image&gt;
                  &lt;Image src="~/images/chooseYourCourse/hypertention.png" 
              stretch="aspectFit" 
              class="productImage"
              tap="tapHypertention"&gt;&lt;/Image&gt;
                  &lt;Label class="m-10 p-10" text="Our programs adhere to the most current medical research."/&gt;
              &lt;/StackLayout&gt;
          &lt;/ScrollView&gt;
          &lt;!-- end content --&gt;
      &lt;/DockLayout&gt;
       &lt;StackLayout verticalAlignment="middle"&gt;
          &lt;ActivityIndicator busy="{{ isBusy }}" /&gt;
      &lt;/StackLayout&gt;
  &lt;/Page&gt;
  </code></pre>
  
  <p><strong>Here is my code-behind:</strong></p>
  
  <pre><code>const Signup2ViewModel = require("./signup2-view-model");
  const app = require("tns-core-modules/application");
  const frameModule = require("tns-core-modules/ui/frame");
  var dialogs = require("tns-core-modules/ui/dialogs");
  const topmost = require("tns-core-modules/ui/frame").topmost;
  var gesturesModule = require("tns-core-modules/ui/gestures");
  const view = require("tns-core-modules/ui/core/view");
  const ActivityIndicator = require("tns-core-modules/ui/activity-indicator").ActivityIndicator;
  var signup2ViewModel = new Signup2ViewModel({ isBusy: false });
  
  var card;
  var exp;
  var cvc;
  var signUpButton;
  
  function onNavigatingTo(args) {
      const page = args.object;
      pageArgs = page;
      page.bindingContext = signup2ViewModel;
      setTimeout(() =&gt; {
          console.log("here");
          signup2ViewModel.isBusy = true;
          // Hides the soft input method, ususally a soft keyboard.
      }, 5100);
  
  }
  
  exports.loaded = function (args) {
      var page = args.object;
      page.bindingContext = signup2ViewModel;
      signup2ViewModel.isBusy = false;
  };
  
  function onDiabetesTap(args) {
      console.log(args);
      //alert("Diabetes");
  
      args.object.page.frame.navigate({
          moduleName: "./signup3/signup3-page",
          animated: true,
          transition: {
              name: "slideLeft",
              duration: 380,
              curve: "easeIn"
          }
      });
  
  }
  
  function onDrawerButtonTap(args) {
      const sideDrawer = app.getRootView();
      sideDrawer.showDrawer();
  }
  
  function onSignupButtonTap(args) {
      signup2ViewModel.set("authenticating", true);
  }
  
  exports.onDiabetesTap = onDiabetesTap;
  exports.onSignupButtonTap = onSignupButtonTap;
  exports.onDrawerButtonTap = onDrawerButtonTap;
  
  </code></pre>
  
  <p>As you can see, I am setting isBusy to true onNavigateTo , and false when onloaded.</p>
  
  <p>It's not working, can you please point me in the right direction? I sure do need the help.</p>
  
  <p>Thank you.</p>
  
  <p>John</p>