import React from 'react'
import PropTypes from 'prop-types'

const svgStyles = {
  position: 'relative',
  width: '100%',
  height: '100%'
}

const SvgPlaceholder = ({styles}) => {
  return (
    <div className={styles.placeholder}>
      <svg x="0" y="0" className={styles.svg} style={svgStyles}>
        <linearGradient id="loader_gradient" gradientUnits="userSpaceOnUse" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0" style={{stopColor: '#ddd'}} stopOpacity="0.5" />
          <stop offset="0.5" style={{stopColor: '#eee'}} />
          <stop offset="1" style={{stopColor: '#ddd'}} stopOpacity="0.5" />
          <animate attributeName="x1" dur="700ms" from="-100" to="100%" repeatCount="indefinite" />
          <animate attributeName="y1" dur="700ms" from="-100" to="100%" repeatCount="indefinite" />
          <animate attributeName="x2" dur="700ms" from="0%" to="200%" repeatCount="indefinite" />
          <animate attributeName="y2" dur="700ms" from="0%" to="200%" repeatCount="indefinite" />
        </linearGradient>
        <g fill="url(#loader_gradient)" className={styles.placeholderG}>
          <rect className={styles.media} />
          <rect className={styles.date} width="80%" />
          <rect className={styles.title} width="80%" />
          <rect className={styles.subtitle} width="50%" />
          <rect className={styles.description_1} width="100%" />
          <rect className={styles.description_2} width="50%" />
        </g>
      </svg>
    </div>
  )
}

SvgPlaceholder.propTypes = {
  styles: PropTypes.object
}

SvgPlaceholder.defaultProps = {
  styles: {}
}

export default SvgPlaceholder

@@ -619,32 +619,283 @@
 5%22 /%3E%0A          
+%7B%0A          /*%0A            Animation disabled due to performance issues. Do not re-enable before verifying that it doesn't cause%0A            performance degradations having a *lot* of placeholders on the page /BN%0A          */%0A          %7D%0A          %7B/*
 %3Canimate attribu
@@ -959,32 +959,35 @@
 =%22indefinite%22 /%3E
+*/%7D
 %0A          %3Canim
@@ -973,32 +973,35 @@
 /%3E*/%7D%0A          
+%7B/*
 %3Canimate attribu
@@ -1065,32 +1065,35 @@
 =%22indefinite%22 /%3E
+*/%7D
 %0A          %3Canim
@@ -1079,32 +1079,35 @@
 /%3E*/%7D%0A          
+%7B/*
 %3Canimate attribu
@@ -1169,32 +1169,35 @@
 =%22indefinite%22 /%3E
+*/%7D
 %0A          %3Canim
@@ -1191,16 +1191,19 @@
         
+%7B/*
 %3Canimate
@@ -1277,24 +1277,27 @@
 definite%22 /%3E
+*/%7D
 %0A        %3C/l

Remove animation on SvgPlaceholder due to massive perf degradation