import React, { Component } from 'react';
import PropTypes from 'prop-types';
import lozad from 'lozad';

import { isBrowser } from '../../api';

class Content extends Component {
  constructor(props) {
    super(props);
    this.post = this.props.post;
  }

  componentDidMount() {
    // lazy loads elements with default selector as '.lozad'
    // Prevent WebPack build fail
    if (isBrowser()) {
      const observer = lozad();
      observer.observe();
    }
  }

  render() {
    return (
      <div
        dangerouslySetInnerHTML={{ __html: this.props.post }}
        style={{
          padding: 15,
          background: 'white',
        }}
      />
    );
  }
}

Content.propTypes = {
  post: PropTypes.string.isRequired,
};

export default Content;

@@ -404,31 +404,348 @@
     
-const observer = lozad(
+// Initialize library%0A      const observer = lozad('.lozad', %7B%0A        load(el) %7B%0A          /* eslint-disable no-param-reassign */%0A%0A          el.src = el.dataset.src;%0A          el.onload = () =%3E %7B%0A            el.classList.add('animated');%0A            el.classList.add('fadeIn');%0A          %7D;%0A          /* eslint-enable */%0A        %7D,%0A      %7D
 );%0A 

add animated fadeIn classes to lozad.js images