Skeleton tabs

Skeleton tabs are used to provide a low fidelity representation of content before it appears on the page, and improves load times perceived by merchants. Can be used for content in or outside of a card.

import {Card, SkeletonTabs} from '@shopify/polaris';
import React from 'react';

function SkeletonExample() {
  return (
    <Card>
      <SkeletonTabs />
    </Card>
  );
}
import {Card, SkeletonTabs} from '@shopify/polaris';
import React from 'react';

function SkeletonExample() {
  return (
    <Card>
      <SkeletonTabs count={4} />
    </Card>
  );
}

Props

Want to help make this feature better? Please share your feedback.

interface SkeletonTabsProps
count?number

Best practices

Skeleton tabs component should:

  • Give merchants an indication of what the page content will be once loaded