Loading

​

Features

• Conditional rendering based on the error state, customizable with the matcher pattern
• Dynamic data attributes for custom styling based on the current error state

​

Anatomy

Import the components and piece the parts together.

import * as Player from "@livepeer/react/player";

export default () => (
  <Player.Root>
    <Player.Container>
      <Player.ErrorIndicator />
    </Player.Container>
  </Player.Root>
);

​

Props

The component accepts all props suitable for a div element, in addition to the following specific props:

​

forceMount

A boolean value that, when set to true, ensures the component is always mounted. This is particularly useful for managing animations with external animation libraries.

​

matcher

A prop intended to define the circumstances under which the LoadingIndicator should be visible. It can be a direct boolean comparison with the loading state or a function that provides custom logic for visibility determination.

​

Data Attributes

​

data-livepeer-loading-indicator

Serves to identify the component’s role.

​

data-loading

Displays the current loading state, "true" when media is loading and "false" when it’s not.

​

data-visible

Indicates the visibility status of the indicator, with "true" meaning it’s currently visible and "false" denoting it’s not.

This is often used for dynamically applying enter/exit CSS animations.