Skeleton loaders for text components

[james2hey]

Hi Paste team 👋

We've got a few skeleton loaders in our components that represent loading text, and I was wondering what the recommend approach is for matching the lineHeight and fontSize of a text element to a SkeletonLoader.

For example, if we have this line of text:

<Text as="span" lineHeight="lineHeight100" fontSize="fontSize40">
  A line of text
</Text>

And we wanted to have a skeleton loader for it, we have used the approach of simulating the lineHeight and fontSize using a Flex wrapper around the SkeletonLoader:

{/* Have to manually map lineHeight100 to 3.25rem and fontSize40 to 1rem */}
<Flex height="3.25rem" vertical vAlignContent="center">
  <SkeletonLoader height="1rem" width="160px" />
</Flex>

Which has the downside of us needing to map the Flex height to the value of lineHeight100, and SkeletonLoader height to fontSize to the value of fontSize40.

For now we've use the actual paste token values to prevent doing this manually, but is the a better approach we could take?

<Theme.Consumer>
  {({ theme }) => (
    <Flex
      height={theme.lineHeights.lineHeight100}
      vertical
      vAlignContent="center"
      >
        <SkeletonLoader
          height={theme.fontSizes.fontSize40}
          width="160px"
           />
    </Flex>
  )}
</Theme.Consumer>

https://codesandbox.io/s/nifty-mendeleev-vse7z1?file=/src/index.tsx:588-801

[libertycarlin]

Hello @james2hey!!

So I just spoke to our engineers and here's a couple of things they noted that may help you!

1. Usually, Text's font-size token should map to the line-height token. I think you guys are doing lineHeight100 and fontSize40, where it should be lineHeight40 instead.

2. Loaders are meant to be an approximate representation of content. you may get it pixel perfect in this iteration, but if theme/tokens/fonts change in a Paste update, the result may be different from what yall are expecting.

Then lastly, there are two distinct problems that may help to solve:

• Lining them up. Just use flex
• Sizing them the same way. Just give SkeletonLoader a height and width

Here's an updated code sandbox https://codesandbox.io/s/serene-cloud-l51kfw?file=/src/index.tsx

[james2hey]

Thanks for the speedy response Liberty!

Thats makes sense for point 1 thank you.

For the part about sizing them up using a SkeletonLoader height, we'd still have to hardcode that height value in px to match the line height, so wouldn't it still have the issue if the line height token changes?

The only way to prevent that I can think of is using theme.lineHeights.lineHeight40 as the height to make sure it matches.

[libertycarlin]

@james2hey Sure thing!

You can try:
const theme = useTheme();

height={theme.lineHeights.lineHeight40}

[james2hey]

Good to know, we'll go with this option then. Thank you!