title: AngularJS View does not show up while loading
body: <p>I've got a simple view which takes 2 seconds to load.
  I also have a loading overlay which checks the $http.pendingRequests to display a Loading-Overlay.</p>
  
  <p>First the Overlay shows up, does it's thing and then the View pops in.
  I need the View to be displayed BEFORE it has finished loading, so that the Overlay can actually be overlaid.</p>
  
  <p>Help pls :( </p>
  
  <p><strong>UPDATE: Controller.js code</strong></p>
  
  <pre><code>(function () {
  "use strict";
  
  angular
      .module("myApp")
      .controller("SearchController", SearchController);
  
  SearchController.$inject = ["$state", "$stateParams", "$scope", "$rootScope", "$searchCache", "fswConvert", "fswAjaxPostPlain", "fswAjaxPost", "runtimeProvider"];
  
  function SearchController($state, $stateParams, $scope, $rootScope, $searchCache, fswConvert, fswAjaxPostPlain, fswAjaxPost, runtimeProvider) {
  
          var vm = this;
  
          vm.ShowSearchResult = false;
  
          vm.init = function () {
              // Set page-size before processing the form to avoid multiple read events.
              var cachePageSize = $searchCache.get("PageSize");
              var currentPageSize = $("#SearchResultGrid").data("kendoGrid").dataSource.pageSize();
              if (cachePageSize &amp;&amp; cachePageSize !== currentPageSize) {
                  $("#SearchResultGrid").data("kendoGrid").dataSource.pageSize($searchCache.get("PageSize"));
              }
  
              if ($searchCache.get("LastSearch")) {
  
                  var lastSearch = $searchCache.get("LastSearch");
                  $("#Nachname").val(lastSearch.Nachname);
                  $("#Vorname").val(lastSearch.Vorname);
                  $("#Geburtsdatum").data("kendoDatePicker").value(lastSearch.Geburtsdatum);
                  $("#SvnrTyp").data("kendoDropDownList").value(lastSearch.SvnrTyp);
                  $("#Sozialversicherungsnummer").data("kendoMaskedTextBox").value(lastSearch.Sozialversicherungsnummer);
                  $("#Kundennummer").data("kendoMaskedTextBox").value(lastSearch.Kundennummer);
                  $("#Verstorben").prop("checked", lastSearch.Verstorben);
                  $("#PhoneticSearch").prop("checked", lastSearch.PhoneticSearch);
                  $("#PostleitzahlSearch").prop("checked", lastSearch.PostleitzahlSearch);
                  $("#PostleitzahlValue").val(lastSearch.PostleitzahlValue);
  
                  vm.processForm();
              }
          };
  
          vm.reset = function () {
              $searchCache.remove("LastSearch");
              $state.go("search", {}, { reload: true });
          };
  
          vm.showKendoValidationErrors = function () {
              var validatable = $("#SearchForm").data("kendoValidator");
  
              if (validatable.errors()) {
                  $rootScope.$apply(function () {
                      $rootScope.errors = validatable.errors();
                  });
              }
              else {
                  $rootScope.$apply(function () {
                      $rootScope.errors = [];
                  });
              }
          };
          vm.hasFilter = function () {
              var nachname = $("#Nachname").val();
              var vorname = $("#Vorname").val();
              var geburtsdatum = $("#Geburtsdatum").data("kendoDatePicker").value();
              var svnrTyp = $("#SvnrTyp").data("kendoDropDownList").value();
              var sozialversicherungsnummer = $("#Sozialversicherungsnummer").data("kendoMaskedTextBox").value();
              var kundennummer = $("#Kundennummer").data("kendoMaskedTextBox").value();
              var plz = $("#PostleitzahlValue").val();
  
              return (nachname
                  || vorname
                  || geburtsdatum
                  || (svnrTyp &amp;&amp; svnrTyp !== 1)
                  || sozialversicherungsnummer
                  || kundennummer
                  || plz);
          };
  
          vm.getSearchData = function (forGet) {
              var result = {
                  Nachname: $("#Nachname").val(),
                  Vorname: $("#Vorname").val(),
                  SvnrTyp: $("#SvnrTyp").data("kendoDropDownList").value(),
                  Sozialversicherungsnummer: $("#Sozialversicherungsnummer").data("kendoMaskedTextBox").raw(),
                  Kundennummer: $("#Kundennummer").data("kendoMaskedTextBox").raw(),
                  Verstorben: $("#Verstorben").is(":checked"),
                  PhoneticSearch: $("#PhoneticSearch").is(":checked"),
                  PostleitzahlSearch: $("#PostleitzahlSearch").is(":checked"),
                  PostleitzahlValue: $("#PostleitzahlValue").val()
              };
  
              if (forGet) {
                  if ($("#Geburtsdatum").data("kendoDatePicker").value()) {
                      result.Geburtsdatum = fswConvert.fswDateConvert("#Geburtsdatum");
                  }
                  else {
                      result.Geburtsdatum = null;
                  }
              }
              else {
                  result.Geburtsdatum = $("#Geburtsdatum").val();
              }
              return result;
          };
  
          vm.processForm = function () {
              if (vm.hasFilter()) {
                  vm.ShowSearchResult = true;
  
                  var grid = $("#SearchResultGrid").data("kendoGrid");
  
                  grid.dataSource.transport.options.read.url = runtimeProvider.BaseUrl + "/Search/SearchResultRead";
                  grid.dataSource.transport.options.read.data = vm.getSearchData(false);
                  grid.dataSource.page(1);
  
                  $searchCache.put("LastSearch", vm.getSearchData());
              }
              else {
                  $rootScope.errors = ["Es muss zumindest ein Suchkriterium ausgefüllt sein um die Suche zu starten."];
              }
          };
  
          vm.processFormCreate = function (htmlPart) {
              $state.go("create", { searchParams: vm.getSearchData(true) });
          };
  
          vm.openPersonOverview = function (personId) {
              $state.go("person.overview", { personId: personId });
          };
  
          vm.cachePageSize = function () {
              var pageSize = $("#SearchResultGrid").data("kendoGrid").dataSource.pageSize();
              $searchCache.put("PageSize", pageSize);
          };
  
  
          vm.init();
      }
  
  })();
  </code></pre>
  
  <p><strong>Controller.cs code:</strong></p>
  
  <pre><code>{
      [AuthorizeRead]
      [NoCache]
      public class SearchController : BasePersonController
      {
          #region Properties.
  
          private const int ITEMS_PER_PAGE = 10;
  
          #endregion
  
          #region Search Actions.
  
          [HttpGet]
          [NoCache]
          public ActionResult KundInnenViaExternal(string hookBack)
          {
              Response.Cache.SetCacheability(HttpCacheability.NoCache);
  
              ViewBag.ActiveSubPage = hookBack.DecodeAsUrlParameter(); //for Toolbar
  
              return View("Search", new PersonSearchModel() {ExternalHook = ViewBag.ActiveSubPage});
          }
  
          [HttpGet]
          public ActionResult KundInnen()
          {
              return View("Search");
          }
  
          [HttpPost]
          [AjaxOnly]
          [NoCache]
          [ValidateAntiForgeryToken]
          public ActionResult KundInnen(PersonSearchModel model)
          {
              Response.Cache.SetCacheability(HttpCacheability.NoCache);
  
              if (!string.IsNullOrWhiteSpace(model.ExternalHook))
                  ViewBag.ActiveSubPage = model.ExternalHook; //for Toolbar
  
              if (!model.HasFilters)
                  ModelState.AddModelError("NoFilters", "Es muss zumindest ein Suchkriterium ausgefüllt sein um die Suche zu starten.");
  
              return BuildJsonPostResult("Search", model);
          }
  
          [HttpPost]
          [AjaxOnly]
          [HandleKendoError]
          public ActionResult SearchResultRead([DataSourceRequest] DataSourceRequest request, PersonSearchModel model)
          {
              if (!ModelState.IsValid || model == null || !model.HasFilters)
                  return null;
  
              model.IncludePersonFunktion = Enum.GetValues(typeof (EPersonFunktionType)).Cast&lt;EPersonFunktionType&gt;().Where(x =&gt; x != EPersonFunktionType.SachwalterProfessionell &amp;&amp; x != EPersonFunktionType.VertreterInProfessionell).ToList();
  
              PersonSearchResultModel searchResult = PerformSearch(request, model, request.PageSize);
  
              return Json(new DataSourceResult
              {
                  Data = searchResult.Personen,
                  Total = searchResult.TotalAmount
              });
          }
  
          #endregion
  
          #region Create Actions.
  
          [HttpGet]
          public ActionResult CreateKunde(PersonSearchModel model)
          {
              var createModel = new PersonCreateModel
              {
                  Vorname = model.Vorname,
                  Nachname = model.Nachname,
                  DefaultSozialversicherungsnummer = new Sozialversicherungsnummer { Svnr = model.Sozialversicherungsnummer },
                  AdditionalSozialversicherungsnummern = new List&lt;Sozialversicherungsnummer&gt; { new Sozialversicherungsnummer { SvnrTyp = ESvnrTyp.Auslaendisch } },
                  Geburtsdatum = model.Geburtsdatum,
                  GeburtslandOesterreich = CollectionCommands.GetGeburtslandOesterreich().Id,
                  Funktion = EPersonFunktionType.Kunde,
              };
              createModel.Staatsbuergerschaft = new StaatsbuergerschaftModel();
              createModel.Staatsbuergerschaft.Aufenthaltsstatus = new AufenthaltsstatusModel();
              createModel.Staatsbuergerschaft.Aufenthaltsstatus.AufenthaltUnbefristet =
                  CollectionCommands.GetAufenthaltstitelUnbefristet().ToList();
  
              return PartialView("../Person/Create", createModel);
          }
  
          #endregion
  
          #region Abstract methods implementation.
  
          protected override ActionResult ExecuteWriteCreatePerson(PersonCreateModel model)
          {
              throw new NotImplementedException("Das Erzeugen einer Person wird nicht über den \"SearchController\" bereitgestellt.");
          }
  
          protected override ActionResult ExecuteWriteUpdatePerson(PersonUpdateModel model)
          {
              throw new NotImplementedException("Das Bearbeiten einer Person wird nicht über den \"SearchController\" bereitgestellt.");
          }
  
          #endregion
      }
  }
  </code></pre>