From a0dd6706f1b7631b65328980df3c079c74505781 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Sun, 13 Mar 2022 23:14:55 +0100
Subject: [PATCH] feat: be possible to customize placeholder

closes #249
---
 packages/react/src/components/Card/CardEmpty.js | 15 +++++++++++----
 packages/react/src/index.js                     |  2 ++
 packages/react/stories/index.js                 |  2 +-
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/react/src/components/Card/CardEmpty.js b/packages/react/src/components/Card/CardEmpty.js
index c2c246bcc..80d57e317 100644
--- a/packages/react/src/components/Card/CardEmpty.js
+++ b/packages/react/src/components/Card/CardEmpty.js
@@ -9,11 +9,17 @@ import { Content } from './CardContent'
 import { GlobalContext } from '../../context/GlobalState'
 import { isLarge, isSmall } from '../../utils'
 
+const Placeholder = styled('span')``
+
+Placeholder.defaultProps = {
+  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 +36,7 @@ const HeaderEmpty = styled('span')`
   `};
 `
 
-const DescriptionEmpty = styled('span')`
+const DescriptionEmpty = styled(Placeholder)`
   opacity: 0.8;
   height: 14px;
   width: 95%;
@@ -40,12 +46,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)