The Loading component can be composed with any other elements. Typically it is combined with Poster

​
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.