[Skeleton] Add skeleton for thumbnails

[helloneele]

WHY are these changes introduced?

Resolves #1039

I chose 3 size options for now, because in the issues screenshot the thumbnails seem to have a size of 30px, not sure if it is accurate or scaled down, though. In the Home sidebar and on Home cards thumbnails have a size of 40px whereas in other sections of the admin (products) thumbnails have a size of 50px.

WHAT is this pull request doing?

Adds a new component that can be used for thumbnails while in loading state

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import React from 'react';
import {
  ActionList,
  AppProvider,
  Card,
  Frame,
  Layout,
  Navigation,
  Page,
  TopBar,
  SkeletonBodyText,
  SkeletonThumbnail,
  Stack,
} from '../src';

export default class FrameExample extends React.Component {
  defaultState = {
    emailFieldValue: 'dharma@jadedpixel.com',
    nameFieldValue: 'Jaded Pixel',
  };

  state = {
    searchActive: false,
    searchText: '',
    userMenuOpen: false,
    showMobileNavigation: false,
    storeName: this.defaultState.nameFieldValue,
  };

  render() {
    const {
      searchActive,
      searchText,
      userMenuOpen,
      showMobileNavigation,
      storeName,
    } = this.state;

    const userMenuActions = [
      {
        items: [{content: 'Community forums'}],
      },
    ];

    const navigationUserMenuMarkup = (
      <Navigation.UserMenu
        actions={userMenuActions}
        name="Dharma"
        detail={storeName}
        avatarInitials="D"
      />
    );

    const userMenuMarkup = (
      <TopBar.UserMenu
        actions={userMenuActions}
        name="Dharma"
        detail={storeName}
        initials="D"
        open={userMenuOpen}
      />
    );

    const searchResultsMarkup = (
      <Card>
        <ActionList
          items={[
            {content: 'Shopify help center'},
            {content: 'Community forums'},
          ]}
        />
      </Card>
    );

    const searchFieldMarkup = (
      <TopBar.SearchField value={searchText} placeholder="Search" />
    );

    const topBarMarkup = (
      <TopBar
        showNavigationToggle
        userMenu={userMenuMarkup}
        searchResultsVisible={searchActive}
        searchField={searchFieldMarkup}
        searchResults={searchResultsMarkup}
      />
    );

    const navigationMarkup = (
      <Navigation location="/" userMenu={navigationUserMenuMarkup}>
        <Navigation.Section
          items={[
            {
              label: 'Back to Shopify',
              icon: 'arrowLeft',
            },
          ]}
        />
        <Navigation.Section
          separator
          title="Jaded Pixel App"
          items={[
            {
              label: 'Dashboard',
              icon: 'home',
              onClick: undefined,
            },
            {
              label: 'Jaded Pixel Orders',
              icon: 'orders',
              onClick: undefined,
            },
          ]}
          action={{
            icon: 'conversation',
            accessibilityLabel: 'Contact support',
            onClick: undefined,
          }}
        />
      </Navigation>
    );

    const actualPageMarkup = (
      <Page title="Orders">
        <Layout>
          <Layout.AnnotatedSection
            title="Pending orders"
            description="Lorem ipsum dolor."
          >
            <Card>
              <Card.Section>
                <Stack wrap={false}>
                  <Stack.Item>
                    <SkeletonThumbnail size="large" />
                  </Stack.Item>
                  <Stack.Item fill>
                    <SkeletonBodyText lines={3} />
                  </Stack.Item>
                </Stack>
              </Card.Section>
              <Card.Section>
                <Stack wrap={false}>
                  <Stack.Item>
                    <SkeletonThumbnail size="large" />
                  </Stack.Item>
                  <Stack.Item fill>
                    <SkeletonBodyText lines={5} />
                  </Stack.Item>
                </Stack>
              </Card.Section>
            </Card>
<Card>
              <Card.Section>
                <Stack wrap={false}>
                  <Stack.Item>
                    <SkeletonThumbnail size="small" />
                  </Stack.Item>
                  <Stack.Item fill>
                    <SkeletonBodyText lines={2} />
                  </Stack.Item>
                </Stack>
              </Card.Section>
              <Card.Section>
                <Stack wrap={false}>
                  <Stack.Item>
                    <SkeletonThumbnail size="medium" />
                  </Stack.Item>
                  <Stack.Item fill>
                    <SkeletonBodyText lines={3} />
                  </Stack.Item>
                </Stack>
              </Card.Section>
              <Card.Section>
                <Stack wrap={false}>
                  <Stack.Item>
                    <SkeletonThumbnail size="large" />
                  </Stack.Item>
                  <Stack.Item fill>
                    <SkeletonBodyText lines={5} />
                  </Stack.Item>
                </Stack>
              </Card.Section>
            </Card>
          </Layout.AnnotatedSection>
        </Layout>
      </Page>
    );

    const theme = {
      colors: {
        topBar: {
          background: '#357997',
        },
      },
      logo: {
        width: 124,
        topBarSource:
          'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999',
        contextualSaveBarSource:
          'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-gray.svg?6215648040070010999',
        url: 'http://jadedpixel.com',
        accessibilityLabel: 'Jaded Pixel',
      },
    };

    return (
      <div style={{height: '500px'}}>
        <AppProvider theme={theme}>
          <Frame
            topBar={topBarMarkup}
            navigation={navigationMarkup}
            showMobileNavigation={showMobileNavigation}
          >
            {actualPageMarkup}
          </Frame>
        </AppProvider>
      </div>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[chloerice]

Code looks excellent!! Thank you so much for taking this on 🙌

[chloerice]

🙌

[allyshiasewdat]

Thanks so much for getting to this so quickly!

[elileto]

💯