sample: infinite scroll example

samples/HtmxorExamples/Components/Pages/Examples/InfiniteScroll/Index.razor

@@ -0,0 +1,51 @@
+@inherits ConditionalComponentBase
+@page "/examples/infinite-scroll"
+@code {
+    private const int PageSize = 20;
+    private IEnumerable<Contact> contacts = Enumerable.Empty<Contact>();
+
+    [SupplyParameterFromQuery(Name = "page")]
+    private int Page { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        contacts = await GetContactsAsync(Page);
+    }
+
+    private static async Task<IEnumerable<Contact>> GetContactsAsync(int pageNumber)
+    {
+        await Task.Delay(TimeSpan.FromMilliseconds(2500));
+        return Contacts.Data.Values.Skip(pageNumber * PageSize).Take(PageSize);
+    }
+}
+<h1>Infinite Scroll</h1>
+<p>This is a Htmxor version of the <a href="https://htmx.org/examples/infinite-scroll/" title="Infinite Scroll example">Infinite Scroll</a> example at htmx.org.</p>
+
+<table class="table">
+    <thead>
+        <tr>
+            <th>Id</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Email</th>
+        </tr>
+    </thead>
+    <tbody>
+        <HtmxFragment>
+            @foreach (var contact in contacts)
+            {
+                <tr>
+                    <th>@contact.Id</th>
+                    <td>@contact.FirstName</td>
+                    <td>@contact.LastName</td>
+                    <td>@contact.Email</td>
+                </tr>
+            }
+            <tr hx-get="/examples/infinite-scroll?page=@(Page + 1)" hx-trigger="revealed" hx-swap="outerHTML">
+                <td colspan="4" class="text-center htmx-indicator">
+                    Loading more data <span class="spinner-grow spinner-grow-sm" role="status"></span>
+                </td>
+            </tr>
+        </HtmxFragment>
+    </tbody>
+</table>

samples/HtmxorExamples/Components/Pages/Home.razor

@@ -43,5 +43,12 @@
                 the MainLayout and in the Htmx specific layout.
             </td>
         </tr>
+        <tr>
+            <td><a href="/examples/infinite-scroll">Infinite Scroll</a></td>
+            <td>
+                Demonstrates how to implement infinite scrolling using htmx. The example fetches a new page of contacts
+                when the last contact is revealed.
+            </td>
+        </tr>
     </tbody>
 </table>

samples/HtmxorExamples/Data/Contacts.cs

@@ -5,9 +5,9 @@ namespace HtmxorExamples.Data;
 
 public static class Contacts
 {
-	public static ConcurrentDictionary<Guid, Contact> Data { get; } = GenerateContacts();
+	public static SortedDictionary<Guid, Contact> Data { get; } = GenerateContacts();
 
-	private static ConcurrentDictionary<Guid, Contact> GenerateContacts()
+	private static SortedDictionary<Guid, Contact> GenerateContacts()
 	{
 		var fakes = new Faker<Contact>()
 			.UseSeed(486967)