diff --git a/packages/react/src/components/Card/CardEmpty.js b/packages/react/src/components/Card/CardEmpty.js index c2c246bcc..ac7b9a3a9 100644 --- a/packages/react/src/components/Card/CardEmpty.js +++ b/packages/react/src/components/Card/CardEmpty.js @@ -9,11 +9,15 @@ import { Content } from './CardContent' import { GlobalContext } from '../../context/GlobalState' import { isLarge, isSmall } from '../../utils' +const Placeholder = styled.span.attrs({ + className: 'microlink_card_placeholder' +})`` + const MediaEmpty = styled(CardImage)` ${emptyStateImageAnimation}; ` -const HeaderEmpty = styled('span')` +const HeaderEmpty = styled(Placeholder)` opacity: 0.8; height: 16px; width: ${({ cardSize }) => (!isSmall(cardSize) ? '60%' : '75%')}; @@ -30,7 +34,7 @@ const HeaderEmpty = styled('span')` `}; ` -const DescriptionEmpty = styled('span')` +const DescriptionEmpty = styled(Placeholder)` opacity: 0.8; height: 14px; width: 95%; @@ -40,12 +44,13 @@ const DescriptionEmpty = styled('span')` animation-delay: 0.125s; ` -const FooterEmpty = styled('span')` +const FooterEmpty = styled(Placeholder)` opacity: 0.8; height: 12px; width: 30%; display: block; - ${emptyStateAnimation} animation-delay: .25s; + ${emptyStateAnimation}; + animation-delay: 0.25s; ${({ cardSize }) => !isLarge(cardSize) && diff --git a/packages/react/src/index.js b/packages/react/src/index.js index 63a372020..bbcddfe71 100644 --- a/packages/react/src/index.js +++ b/packages/react/src/index.js @@ -39,6 +39,7 @@ const Card = props => { setData, url, apiKey, // destructuring to avoid pass it + placeholderComponent: CardEmpty, ...restProps } = props @@ -224,6 +225,7 @@ const Microlink = props => ( Microlink.defaultProps = { className: '', apiKey: undefined, + placeholderComponent: CardEmpty, autoPlay: true, controls: true, direction: 'ltr', diff --git a/packages/react/stories/index.js b/packages/react/stories/index.js index 998c99528..fd1555f4f 100644 --- a/packages/react/stories/index.js +++ b/packages/react/stories/index.js @@ -26,7 +26,7 @@ storiesOf('props', module) createStoryEntry({ url, media: 'video', controls: false }) ) ) - .add('loading', () => createStoryEntry({ loading: true })) + .add('loading', () => createStoryEntry({ loading: true, fetchData: false })) .add('lazy', () => [ createStoryEntry({ lazy: false }, true), createStoryEntry({ lazy: { threshold: 1 } }, true)