perjansson

// Render function of ProgressiveImage
render() {
  return this.props.render(loading)
}

// Usage
render() {
  return (
    <ProgressiveImage
        render={(src, loading) => (

perjansson

<ProgressiveImage
  preview="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAS......"
  image={`/static/images/burgers/${id}.jpg`}
/>

perjansson

class ProgressiveImage extends Component {
  state = {
    currentImage: this.props.preview,
    loading: true,
  }

perjansson

componentDidMount() {
  this.fetchImage(this.props.image)
}

perjansson

fetchImage = src => {
  const image = new Image()
  image.onload = () => this.setState({ currentImage: this.loadingImage.src, loading: false })
  image.src = src
  this.loadingImage = image
}

perjansson

style = loading => {
  return {
    transition: '0.5s filter linear',
    filter: `${loading ? 'blur(50px)' : ''}`,
  }
}

render() {
  const { currentImage, loading } = this.state
  const { alt } = this.props

perjansson

const reverseString = input => {
    const stack = []
    for (let s of input) {
        stack.push(s)
    }

    let output = ""
    while (stack.length > 0) {
        output += stack.pop()
    }

perjansson

<ul class="grid">
	<li><img src="burger1.jpg"></li>
	<li><img src="burger2.jpg"></li>
	<li><img src="burger3.jpg"></li>
	<li><img src="burger4.jpg"></li>
	<li><img src="burger5.jpg"></li>
	<li><img src="burger6.jpg"></li>
	<li><img src="burger7.jpg"></li>
	...
</ul>

perjansson

ul {
    list-style: none;
    display: grid;
    grid-gap: 0.4rem;
    grid-template-columns: 33.3% 33.3% auto;
    grid-auto-rows: 40%;
}

perjansson

ul {
    list-style: none;
    display: grid;
    grid-gap: 0.4rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: 28%;
    grid-auto-flow: dense;
}

.wide {