Blazor Development

Loading Pattern (IMPORTANT)

• Use LoadingSkeleton - NOT Dimmer for loading states
• Property name - Always use Loading (not Busy, IsLoading, etc.)
• Early return guard - Add if (this.Loading) return; at start of load method to avoid double loading
• try-finally - Always wrap loading logic in try-finally to ensure Loading = false

LoadingSkeleton Modes

<LoadingSkeleton Loading="@Loading" Mode="Skeleton.PlaceholderMode.Table">
    // Table content
</LoadingSkeleton>

<LoadingSkeleton Loading="@Loading" Mode="Skeleton.PlaceholderMode.Card">
    // Card content
</LoadingSkeleton>

<LoadingSkeleton Loading="@Loading" Mode="Skeleton.PlaceholderMode.Text">
    // Text content
</LoadingSkeleton>

Loading Method Pattern

private bool Loading { get; set; }

private async Task LoadDataAsync()
{
    if (this.Loading) return; // Prevent double loading
    try
    {
        this.Loading = true;
        // Load data...
    }
    finally
    {
        this.Loading = false;
    }
}

Example

@page "/motorbikes"
@inherits LocalizedComponentBase<MotorbikeList>
@inject MotorbikeService MotorbikeService

@* title and header with custom component *@
<MotoRentPageTitle>@Localizer["Motorbikes"]</MotoRentPageTitle>
<TablerHeader Title="@Localizer["Motorbikes"]" PreTitle="@Localizer["List of all motorbikes"]">

    <div class="d-flex justify-content-end">
        <div class="px-2">
            <a href="@("/motorbikes/create")" class="btn btn-primary">
                <i class="ti ti-plus me-2"></i>
                @Localizer["Create new motorbike"]
            </a>
        </div>
    </div>
</TablerHeader>

    @* Loading with LoadingSkeleton *@
  <LoadingSkeleton Loading="@Loading" Mode="Skeleton.PlaceholderMode.Table">

    <table class="table table-vcenter">
    <thead>
        <tr>
            <th>@CommonLocalizer["Name"]</th>
            <th>@Localizer["LicensePlate"]</th>
            <th>@Localizer["Status"]</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var motorbike in this.Motorbikes)
        {
            <tr>
                <td>@motorbike.Brand @motorbike.Model</td>
                <td>@motorbike.LicensePlate</td>
                <td>
                    <span class="badge @GetStatusBadgeClass(motorbike.Status)">
                        @Localizer[motorbike.Status]
                    </span>
                </td>
            </tr>
        }
    </tbody>
    </table>
  </LoadingSkeleton>

@code {
    private List<Motorbike> Motorbikes {get;} = [];
    private bool Loading {get; set;}

    protected override async Task OnParametersSetAsync()
    {
        if(this.Loading) return; // avoid double loading
        try
        {
            this.Loading = true;
            var query = this.DataContext.CreateQuery<Motorbike>()
                    .Where(x => x.MotorbikeId > 0)
                    .OrderByDescending(x => x.Brand);
            var load = await this.DataContext.LoadAsync(query, includeTotalRows: true);
            this.Motorbikes.Clear();
            this.Motorbikes.AddRange(load.ItemCollection);
        }
        finally
        {
            this.Loading = false;
        }
    }

    private static string GetStatusBadgeClass(string status) => status switch
    {
        "Available" => "bg-success-lt",
        "Rented" => "bg-primary-lt",
        "Maintenance" => "bg-warning-lt",
        _ => "bg-secondary-lt"
    };
}

CSS Isolation and Theming (IMPORTANT)

Use CSS Isolation Files

• Always use .razor.css files instead of inline <style> blocks for better organization
• CSS isolation files are automatically scoped to the component
• Use ::deep combinator to style child components

Theme-Aware Styling with Tabler CSS

This project uses Tabler CSS framework which supports light/dark themes via data-bs-theme attribute.

DO use Tabler's built-in CSS variables:

/* These automatically adapt to light/dark theme */