Creating a busy indicator in Blazor

In the modern world of async, we are all used to seeing busy indicators when we wait for something to load. Why shouldn’t we do the same thing in Blazor? Why indeed.

My first attempt was based on examples I’ve seen around, and looked something like this…

@if (_myData == null) {
  <p><span class="fad fa-spin fa-spinner" aria-hidden="true"></span> Loading data...</p>
} else {
  <p>Data is loaded</p>
}

Pretty simple example, but you get the idea.

Given that I was going to have to do this many times, it seemed logical to turn it into a Blazor component. I created a new Blazor component called Busy.razor, and replaced the contents with this…

@if (Data == null) {
  <p><span class="fad fa-spin fa-spinner" aria-hidden="true"></span> @Message</p>
} else {
  @ChildContent
}

@code {
  [Parameter]
  public string Message { get; set; } = "Loading...";

  [Parameter]
  public object Data { get; set; }

  [Parameter]
  public RenderFragment ChildContent { get; set; }
}

Using this was very simple…

  <Busy Message="Loading data..." Data="_myData ">
    <p>Data is loaded</p>
  </Busy>

Obviously, the message shown in the busy indicator could be spiffed up somewhat, but that’s a CSS issue, not for this post 🙂

Blazor makes things soooo simple, I wonder if I’ll be out of a job soon!

Be First to Comment

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.