search

jxom / bumbag-ui

Build themeable React & React Native applications with your Bumbag 👝
https://bumbag.style
MIT License
1.01k stars 50 forks source link

Skeleton Loading #46

Open hazem3500 opened 4 years ago

hazem3500 commented 4 years ago

It would be nice to have a Skeleton Loading component added to the component library. It could have a similar API to Chakra-UI Skeleton Component

I am willing to make a PR implementing that component.

jxom commented 4 years ago

This would be nice. Feel free to raise a PR.

I was thinking there could be two types of uses:

Standalone Skeleton

A skeleton can be standalone, and mimic the <Box> component:

// A skeleton with width 100% and height 10px
<Skeleton height="10px" />

// Could also make a circular skeleton of diameter 10px
<Skeleton borderRadius="100%" height="10px" width="10px" />

Skeleton Wrapper

A skeleton can wrap content, and be passed a hasLoaded state:

<Skeleton hasLoaded={!isLoading}>
  <Text.Block fontWeight="semibold">John Jones</Text.Block>
  <Text.Block>Software Engineer</Text.Block>
</Skeleton>
hazem3500 commented 4 years ago

Cool 👍, I will see if I'll be able to make a PR soon.