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

Basic Infinite Scrolling List (Stack)

This sample demonstrates a basic infinite scrolling list where items are added dynamically as the user scrolls. The component uses a vertically stacked layout when a single column width is provided.

infinite-scrolling-list-2-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 InfiniteScrollingListStackSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

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

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

        private async Task<IComponent[]> GetNextItemsAsync(int count)
        {
            // simulate delay
            await Task.Delay(200);
            return GenerateItems(count);
        }

        private IComponent[] GenerateItems(int count)
        {
            var items = new IComponent[count];
            for (var i = 0; i < count; i++)
            {
                items[i] = Card(TextBlock($"Page {page} Item {i + 1}").NonSelectable())
                                .MinWidth(200.px());
            }
            page++;
            return items;
        }
    }
}

Infinite Scrolling Grid List

This sample sets up an infinite scrolling grid list, specifying different widths for each column to create a grid layout.

infinite-scrolling-list-3-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 InfiniteScrollingListGridSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

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

        public HTMLElement Render()
        {
            return InfiniteScrollingList(
                new IComponent[0],
                () => GetNextItemsAsync(20),
                33.percent(), 33.percent(), 34.percent() // defining three grid columns with relative widths
            )
            .Height(500.px())
            .Render();
        }

        private async Task<IComponent[]> GetNextItemsAsync(int count)
        {
            await Task.Delay(200);
            return GenerateItems(count);
        }

        private IComponent[] GenerateItems(int count)
        {
            var items = new IComponent[count];
            for (var i = 0; i < count; i++)
            {
                items[i] = Card(TextBlock($"Page {page} Grid Item {i + 1}").NonSelectable())
                                .MinWidth(200.px());
            }
            page++;
            return items;
        }
    }
}