title: asp.net core razor page 'loading indicator'
body: <p>I'm new to web development in general, and so I'm suspecting that i have misunderstood the core premise of razor pages.</p>
  
  <p>I am trying to add a loading indicator to my page while I'm pulling data.
  While this could be achieved with a js promise, i was under the assumption that i could do this entirely in c# with the cshtml files.</p>
  
  <p>In my controller i have a Page model looking like so:</p>
  
  <pre><code>public Boolean IsLoading { get; set; } = true;
  
  public async Task&lt;IActionResult&gt; OnGetAsync()
  {
      await Task.Run(() =&gt;
      {
          Thread.Sleep(1000 * 10);
          IsLoading = false;
      });
      return Page();
  }
  </code></pre>
  
  <p>Just something to simulate an expensive database query, and a bool to indicate when loading is done.</p>
  
  <p>In my pagefile i have something looking like this: </p>
  
  <pre><code>@if (@Model.IsLoading)
  {
      &lt;div&gt;
          &lt;img src="~/Images/loading.gif" /&gt;
      &lt;/div&gt;
  }
  else
  {
      &lt;div&gt;
          &lt;&lt;Some Code Showing My Data&gt;&gt;
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>I have tried multiple ways to try and update the model or redraw the page when the data pull is finished, but i have been unable to find any ways that work.</p>
  
  <p>The desired behavior is to have the page show the loading symbol up until the 'database query' finished and then display the data instead. </p>
  
  <p>The current behavior that i am seeing is that the page will not percent until the 'database query' has finished. So I never see the loading gif. </p>