@page "/" <div class="my-4 p-2 border rounded-3"> <button @onclick="LoadFlyersAction" disabled="@isLoading" class="btn btn-primary">Reload Data</button> </div> <table class="table table-striped"> <thead class="table-dark"> <tr><th>Deal</th><th>Range</th><th>Id</th><th>Edit</th><th>Delete</th></tr> </thead> <tbody> @if(isLoading) { <tr> <td colspan=100> <div class="d-flex justify-content-center"> <div class="spinner-border" role="status"> <span class="visually-hidden">Loading...</span> </div> <strong class="ms-4">Loading data...</strong> </div> </td> </tr> } else { @foreach (var f in FlyersState.Value.Flyers) { <tr> <td class="clickable" @onclick="()=>OpenFlyerDetails(f)"> @f.DealNo <a href="flyers/@(f.Id)" target="_blank"><i class="fas fa-external-link-alt"></i></a> </td> <td>@f.Range</td> <td>@f.Id</td> <td> <a class=" float-right" href="" data-target="#flyerModal" data-toggle="modal" @onclick="(() => EditFlyer(f))"> <i class="fas fa-edit"></i> </a> </td> <td> <a class=" float-right" href="" data-target="#confirmModal" data-toggle="modal" @onclick="(() => ShowDeleteConfirmAtionDialog(f))"> <i class="far fa-trash-alt"></i> </a> </td> </tr> } } </tbody> </table> @code { private Flyer selectedFlyer => FlyersState.Value.SelectedFlyer; private bool isLoading = true; // Flyer flyer = new Flyer(); protected override async Task OnInitializedAsync() { // Dispatcher.Dispatch(new LoadFlyersAction()); await LoadFlyersAction(); await base.OnInitializedAsync(); } // Simulate some long running process that queries data async Task LoadFlyersAction() { isLoading = true; FlyersState.Value.Flyers.Clear(); await Task.Delay(2000); for(var i = 0; i < 10; i++) { FlyersState.Value.Flyers.Add( new Flyer { Id = "ID" + i, DealNo = i * 100, Range = TimeSpan.FromHours(i) } ); } isLoading = false; } void ShowDeleteConfirmAtionDialog(Flyer flyer) { // placeholder } void OpenFlyerDetails(Flyer flyer) { // placeholder } void EditFlyer(Flyer flyer) { // placeholder } public static class FlyersState { public static class Value { public static List<Flyer> Flyers {get; set; } = new List<Flyer>(); public static Flyer SelectedFlyer {get; set; } = new Flyer(); } } public class Flyer { public String Id {get; set;} public TimeSpan Range {get; set;} public int DealNo {get; set; } } }