createEmptyPlaceholderPlugin

Create an empty/loading placeholder plugin

import {
    createEmptyPlaceholderPlugin,
} from "@roku-sdk/flex-grid/empty-placeholder";

createEmptyPlaceholderPlugin<T = unknown>(config: EmptyPlaceholderConfig<T>): InitGridPlugin<T>

Description

Create an empty/loading placeholder plugin. Pass the returned object in FlexGridConfig.plugins.

Parameters

Return values

Returns InitGridPlugin<T>.

Example

import { createEmptyPlaceholderPlugin } from "@roku-sdk/flex-grid/empty-placeholder";

createFlexGrid({
    plugins: [
        createEmptyPlaceholderPlugin({
            renderEmptyPlaceholder: ({ width, height }) => (
                <rectangle width={width()} height={height()} color="0x1A1A1AFF" />
            )
        })
    ],
    poolBuffer: { default: 24, emptyPlaceholder: 8 }
});

Types

EmptyPlaceholderConfig

Empty Placeholder Config configuration and callbacks.

EmptyPlaceholderConfig.isEmpty

Decides which cells are treated as unresolved. Defaults to item === undefined, which matches the grid's own "row is loading" state (store.rows[i] === undefined).

Note a loaded-but-empty row ([]) collapses to zero height and so has nowhere to draw — this plugin covers the loading state, not that one.

EmptyPlaceholderConfig.renderEmptyPlaceholder

Render the placeholder for an unresolved cell. Return any component output; a rectangle, a skeleton composition, a poster, whatever the app needs.

Receives reactive accessors: read them inside JSX props, createMemo, or createEffect, and never destructure the values at the top level. The nodes are pooled, so a slot is recycled to a different row/col as the grid scrolls; reading row() once would freeze every recycled slot on whichever row it first displayed.

EmptyPlaceholderConfig.templateId

Pool template key for placeholder nodes. Defaults to "emptyPlaceholder".

Warm it like any other template; poolBuffer: { emptyPlaceholder: 8 }. Must not collide with an id the app returns from getCellTemplateId, or real cells and placeholders would share pooled nodes.

EmptyPlaceholderContext

Reactive context handed to EmptyPlaceholderConfig.renderEmptyPlaceholder.