Merge pull request #1480 from Gamaranto/placeholder-animation

Add Placeholder animation

src/shared/components/Placeholder/Placeholder.tsx

@@ -1,3 +1,4 @@
+import { keyframes } from '@emotion/core'
 import styled from '@emotion/styled'
 import { colors } from '@/shared/theme'
 
@@ -9,11 +10,20 @@ type PlaceholderProps = {
 
 const getPropValue = (v: string | number) => (typeof v === 'string' ? v : `${v}px`)
 
+const pulse = keyframes`
+  0, 100% {
+    opacity: 1
+  }
+  50% {
+    opacity: 0.5
+  }
+`
 const Placeholder = styled.div<PlaceholderProps>`
   width: ${({ width = '100%' }) => getPropValue(width)};
   height: ${({ height = '100%' }) => getPropValue(height)};
   border-radius: ${({ rounded = false }) => (rounded ? '100%' : '0')};
   background-color: ${colors.gray['400']};
+  animation: ${pulse} 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 `
 
 export default Placeholder

src/shared/components/VideoPreview/VideoPreviewBase.styles.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled'
+import { keyframes } from '@emotion/core'
 import { colors, spacing } from '@/shared/theme'
 import { CoverHoverOverlay, CoverIcon, ProgressOverlay } from './VideoPreview.styles'
 
@@ -10,6 +11,14 @@ type ContainerProps = {
 
 export const MAX_VIDEO_PREVIEW_WIDTH = '320px'
 
+const fadeIn = keyframes`
+  0% {
+    opacity: 0
+  }
+  100% {
+    opacity: 1
+  }
+`
 export const CoverContainer = styled.div`
   width: 100%;
   height: 190px;
@@ -19,6 +28,7 @@ export const CoverContainer = styled.div`
   transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
 
   position: relative;
+  animation: ${fadeIn} 0.5s ease-in;
 `
 
 export const Container = styled.article<ContainerProps>`