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


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


Import the components and piece the parts together.

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

export default () => (
      <Player.ErrorIndicator />


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


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.


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


Serves to identify the component’s role.


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


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.