SkeletonRow

How to use SkeletonRow

Use the SkeletonRow component to create a better loading state for your tables whenever they use asynchronous data.

Import

import { SkeletonRow } from '@contentful/f36-components';
// or
import { SkeletonRow } from '@contentful/f36-skeleton';

Code examples

<Table>
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell>Email</TableCell>
      <TableCell>Address</TableCell>
      <TableCell>Postcode</TableCell>
      <TableCell>City</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <SkeletonRow rowCount={5} columnCount={5} />
  </TableBody>
</Table>
<Table>
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell>Email</TableCell>
      <TableCell>Address</TableCell>
      <TableCell>Postcode</TableCell>
      <TableCell>City</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <SkeletonRow rowCount={5} columnCount={5} />
  </TableBody>
</Table>
Hide source

Best practices

• Pass a value to the columnCount prop equal to the number of columns in your table (default value is 5)
• Pass a value to the rowCount prop equal to the number of rows you need. We think that for a better experience this value should match the number of rows that this table usually has when it's first loaded.
• Only use this component as a child of the TableBody component. The SkeletonRow component renders <tr> tags, and this HTML tag should always be a child of a <tbody> tag

Props

• Name

  columnCount

  Description

  Defines the number of columns to be rendered

  number

  Default

  5
• Name

  rowCount

  Description

  Defines the number of rows to be rendered

  number

  Default

  1