Allow setting the skeleton width and height only while it is being loaded

🚀 Feature request

Since Chakra provides an incredible Skeleton wrapper that works as a Box, it is common to face scenarios where your Skeleton is wrapping an empty content until you fetch the remote data. For those cases, it would be great to have a way to customize the Skeleton width/height while is being loaded without affecting the content box afterwards.

🧱 Problem Statement / Justification

Here is a sample snippet:

      <Skeleton isLoaded={!isLoading}>
        <Heading as="h3" fontSize="18px">
          {company?.name}
        </Heading>
      </Skeleton>

In that snippet (which is pretty common in my project) before fetching company data, the Skeleton component is empty, since it is rendering an undefined child. When it renders in my DOM I simply cannot see the Skeleton at all.

To fix that, I have two options, I can either:

Use a static text fallback (bad):

      <Skeleton isLoaded={!isLoading}>
        <Heading as="h3" fontSize="18px">
          {company?.name ?? 'Sample text'}
        </Heading>
      </Skeleton>

This works, but it is hacky and suboptimal (I can have some issues like running into an error in my request, and them rendering the Sample text instead.

Set the minimum width and height:

      <Skeleton isLoaded={!isLoading} minW="150px" minH="21px">
        <Heading as="h3" fontSize="18px">
          {company?.name}
        </Heading>
      </Skeleton>

This works, but after rending the final component the minW and minH props are passed to the Skeleton box, affecting the behavior of the final rendered component (which is bad). To fix that, I ended up with something like this:

      <Skeleton isLoaded={!isLoading} minW={ isLoading ? '150px' : 'auto' } minH={ isLoading ? '21px' : 'auto' }>
        <Heading as="h3" fontSize="18px">
          {company?.name}
        </Heading>
      </Skeleton>

Which, in my opinion, is hacky.

We should have a prop to set the width and height of the Skeleton only when it is being loaded.

✅ Proposed solution or API

I suggest the following API:

      <Skeleton isLoaded={!isLoading} skeletonW="150px" skeletonH="21px">
        <Heading as="h3" fontSize="18px">
          {company?.name}
        </Heading>
      </Skeleton>

↩️ Alternatives

I’ve already describe some alternatives, but for now that is the best one (IMHO):

      <Skeleton isLoaded={!isLoading} minW={ isLoading ? '150px' : 'auto' } minH={ isLoading ? '21px' : 'auto' }>
        <Heading as="h3" fontSize="18px">
          {company?.name}
        </Heading>
      </Skeleton>

[stale[bot]]

Hi! This issue hasn’t seen any activity recently. We close inactive issues after 35 days to manage the volume of issues we receive. If we missed this issue or you want to keep it open, please reply here. That will reset the timer and allow more time for this issue to be addressed before it is closed.

[omattman]

+1 would want this