title: blazor loading spinner when component is loading html/css
body: <p>I have a small thing that I need to do. There's my problem. I open a component, and then I can click &quot;edit&quot; and then I need 3-4 seconds while that need html/css is shown on the page. What I'm trying to do is that when I click &quot;edit&quot; I set &quot;loading = true&quot;, and when component finishes rendering that new html/css I set &quot;loading = false&quot;. Here is a sample of what I'm trying to achieve:</p>
  <pre><code>if (!edit) {
     &lt;h2&gt;test&lt;/h2&gt;
     @foreach (var item in items) {
        &lt;p&gt;Test item&lt;/p&gt;
     }
  }
  else {
     &lt;button @onclick = &quot;() =&gt; { edit = true; }&quot;&gt;
     &lt;h2&gt;test other &lt;/h2&gt;
     &lt;input /&gt;
     &lt;input /&gt;
  }
  </code></pre>
  <p>This is how I set loading spinner to show on page:</p>
  <pre><code>await InvokeAsync(() =&gt; { loading = true; });
  await InvokeAsync(() =&gt; { loading = false; });
  </code></pre>
  <p>So, my question is how can I make that when a person presses edit, the spinner automatically starts spinning on the screen. I know how to do it when OnInitializedAsync, but at this specific situation, it's not being initialized, it just shows a different part of the component (but it takes 5 seconds, huge code). Is there a way?</p>