Tesserae

InfiniteScrollingList

Description

InfiniteScrollingList is a dynamic component designed to display a paginated list of UI elements that loads additional content as the user scrolls. It supports both list (stack) and grid layouts depending on the number of columns provided. Use this component when you need to render items in small to moderate quantity with an infinite scrolling experience. For extremely large datasets, consider using VirtualizedList.

Usage

Initialize the InfiniteScrollingList using one of the overloaded factory methods from the Tesserae.UI helper. You provide an initial set of items (optionally empty) and an asynchronous function that returns the next page of items. Optionally, you can pass multiple UnitSize values to establish a grid layout. The component automatically appends a VisibilitySensor that triggers fetching additional items when nearing the bottom of the list.

Below is an example that instantiates an InfiniteScrollingList in a simple list mode:

infinite-scrolling-list-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new MyInfiniteScrollingListSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class MyInfiniteScrollingListSample : IComponent
    {
        private int page = 1;

        public HTMLElement Render()
        {
            return InfiniteScrollingList(
                // initial items (empty array in this case)
                new IComponent[0],
                () => GetNextItemsAsync(20)
            )
            .Height(500.px())
            .Render();
        }

        private async Task<IComponent[]> GetNextItemsAsync(int count)
        {
            // Simulate a delay for loading next items
            await Task.Delay(200);
            return GetItems(count);
        }

        private IComponent[] GetItems(int count)
        {
            // Generates a set of cards to be displayed
            var items = new IComponent[count];
            for (var i = 0; i < count; i++)
            {
                items[i] = Card(TextBlock($"Item {page} / {i + 1}").NonSelectable())
                                .MinWidth(200.px());
            }
            page++;
            return items;
        }
    }
}

Methods

WithEmptyMessage(Func
emptyListMessageGenerator)
- Description: Sets a function that generates a message/component to be displayed when the list is empty.
- Parameters:
  - emptyListMessageGenerator: A function that returns an IComponent used as an empty list message.
- Returns: The current instance of InfiniteScrollingList to allow method chaining.

Properties

StylingContainer (HTMLElement)
- Description: Returns the HTML element that serves as the container for styling purposes.
PropagateToStackItemParent (bool)
- Description: A flag indicating whether styling or properties should propagate to the parent of each stack item. Returns true.

Samples

Infinite Scrolling Stack with Async Loading

Each time the visibility sensor at the bottom of the list comes into view, the loader awaits a simulated network call and returns the next page of 15 items. Scroll to the bottom — the page counter advances and the newly loaded items are appended.

infinite-scrolling-list-2-sample.js

using System;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            document.body.style.overflow = "hidden";
            MountCenteredToBody(new InfiniteStackSample());
        }
    }

    public class InfiniteStackSample : IComponent
    {
        private int _page;

        public HTMLElement Render()
        {
            return InfiniteScrollingList(
                    GetItems(15),
                    async () => await NextPageAsync(15))
                .Height(400.px())
                .Render();
        }

        private async Task<IComponent[]> NextPageAsync(int count)
        {
            await Task.Delay(500);
            return GetItems(count);
        }

        private IComponent[] GetItems(int count)
        {
            _page++;
            return Enumerable.Range(1, count).Select(i =>
                (IComponent)Card(HStack().AlignItemsCenter().Children(
                    Icon(UIcons.File).Primary(),
                    VStack().PL(8).Children(
                        TextBlock($"File page-{_page:D2}-{i:D2}.txt").SemiBold(),
                        TextBlock($"Loaded on scroll – page {_page}").Small().Muted()
                    )
                ).Padding(8.px())).MinWidth(220.px())
            ).ToArray();
        }
    }
}

Infinite Scrolling Grid Layout

By passing more than one column width to InfiniteScrollingList, the same async-loaded items are laid out as a responsive grid. This sample uses three 33%-width columns.

infinite-scrolling-list-3-sample.js

using System;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            document.body.style.overflow = "hidden";
            MountCenteredToBody(new InfiniteGridSample());
        }
    }

    public class InfiniteGridSample : IComponent
    {
        private int _page;

        public HTMLElement Render()
        {
            return InfiniteScrollingList(
                    GetItems(18),
                    async () => await NextPageAsync(18),
                    33.percent(), 33.percent(), 34.percent())
                .Height(400.px())
                .Render();
        }

        private async Task<IComponent[]> NextPageAsync(int count)
        {
            await Task.Delay(500);
            return GetItems(count);
        }

        private IComponent[] GetItems(int count)
        {
            _page++;
            return Enumerable.Range(1, count).Select(i =>
                (IComponent)Card(VStack().AlignItemsCenter().Children(
                    Icon(UIcons.Picture).XLarge().Primary(),
                    TextBlock($"Tile {_page}.{i}").SemiBold().PT(8),
                    TextBlock($"Loaded asynchronously").Small().Muted()
                ).Padding(12.px())).MinWidth(180.px())
            ).ToArray();
        }
    }
}