Loading data

@* PageSize with Paging="DataPaging.LoadMore": the first page, and a button after it that adds
   the next, scrolling with the items in a box as tall as MaxHeight. On static pages and with
   JavaScript off, the button is a link to the same list with one more page. *@
<ListView Items="_events" ItemKey="e => e.Id" ItemText="e => e.Title" ItemDescription="e => e.When"
          ItemIcon="_ => Lucide.Bell" PageSize="4" Paging="DataPaging.LoadMore" QueryPrefix="events-"
          MaxHeight="16.Rem" Bordered AriaLabel="Notifications" MaxWidth="28.Rem" Grow />

@code {
    private readonly Event[] _events = Enumerable.Range(1, 11)
        .Select(i => new Event(i.ToString(System.Globalization.CultureInfo.InvariantCulture), $"Notification {i}", $"{i * 7} minutes ago"))
        .ToArray();
}

@* PageSize with Paging="DataPaging.LoadOnScroll" and a MaxHeight: the next page loads as the
   last item scrolls into view, on interactive pages. *@
<ListView Items="_messages" ItemKey="m => m.Id" ItemText="m => m.Title" ItemDescription="m => m.When"
          ItemIcon="_ => Lucide.MessageSquare" PageSize="8" Paging="DataPaging.LoadOnScroll" QueryPrefix="feed-"
          MaxHeight="18.Rem" Bordered AriaLabel="Messages" MaxWidth="28.Rem" Grow />

@code {
    private readonly Message[] _messages = Enumerable.Range(1, 40)
        .Select(i => new Message(i.ToString(System.Globalization.CultureInfo.InvariantCulture), $"Message {i}", $"{i * 3} minutes ago"))
        .ToArray();
}