Tesserae - Infinite Scrolling List

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;
        }
    }
}

API reference

class

InfiniteScrollingList

public sealed class InfiniteScrollingList : IComponent, ISpecialCaseStyling

A list that lazily loads additional items as the user scrolls toward the bottom, suitable for very large or unbounded result sets.

Constructors

Constructor

InfiniteScrollingList

public InfiniteScrollingList(Func<IComponent[]> getNextItemPage, params UnitSize[] columns) : this(new IComponent[0], () => Task.FromResult<IComponent[]>(getNextItemPage()), columns)

Initializes a new instance of this class.

Constructor

InfiniteScrollingList

public InfiniteScrollingList(IComponent[] items, Func<IComponent[]> getNextItemPage, params UnitSize[] columns) : this(items, () => Task.FromResult<IComponent[]>(getNextItemPage()), columns)

Initializes a new instance of this class.

Constructor

InfiniteScrollingList

public InfiniteScrollingList(Func<Task<IComponent[]>> getNextItemPage, params UnitSize[] columns) : this(new IComponent[0], getNextItemPage, columns)

Initializes a new instance of this class.

Constructor

InfiniteScrollingList

public InfiniteScrollingList(IComponent[] items, Func<Task<IComponent[]>> getNextItemPage, params UnitSize[] columns)

Initializes a new instance of this class.

Properties

Property

InfiniteScrollingList.StylingContainer

public HTMLElement StylingContainer

Gets or sets the styling container.

Property

InfiniteScrollingList.PropagateToStackItemParent

public bool PropagateToStackItemParent

Gets or sets the propagate to stack item parent.

Methods

Method

InfiniteScrollingList.WithEmptyMessage

public InfiniteScrollingList WithEmptyMessage(Func<IComponent> emptyListMessageGenerator)

Returns the component configured with the given empty message.

Method

InfiniteScrollingList.Render

public HTMLElement Render()

Renders the component's root HTML element.

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();
        }
    }
}

Referenced by

VisibilitySensor

InfiniteScrollingList

Description

Usage

API reference

Constructors

InfiniteScrollingList

InfiniteScrollingList

InfiniteScrollingList

InfiniteScrollingList

Properties

InfiniteScrollingList.StylingContainer

InfiniteScrollingList.PropagateToStackItemParent

Methods

InfiniteScrollingList.WithEmptyMessage

InfiniteScrollingList.Render

Samples

Infinite Scrolling Stack with Async Loading

Infinite Scrolling Grid Layout

See also

Referenced by