Movie, Image and Oops component

Image.js

import React, { Fragment } from 'react';
import ProgressiveImage from 'react-progressive-image';

const Image = ({ src, alt, className }) => (
  <ProgressiveImage
    src={src}
    placeholder="data:image/gif;base64,R0lGODlhAQABAIAAAHd3dwAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="
  >
    {(currentSrc, loading) => (
      <Fragment>
        <img src={currentSrc} alt={alt} className={loading ? `${className} loading-img` : className} />
        <noscript>
          <img src={src} alt={alt} className={className} />
        </noscript>
      </Fragment>
    )}
  </ProgressiveImage>
);

export default Image;

Movie.js

import React, { Component } from 'react';
import Router from 'next/router';
import Link from 'next/link';

import Image from './Image';

import { getImageSrc } from '../utils/apiCalls';

class Movie extends Component {
  prefetchMoviePage = () => {
    Router.prefetch(`/movie?id=${this.props.id}`);
  };

  render() {
    const { id, poster_path, title, overview } = this.props;
    return (
      <Link as={`/movie/${id}`} href={`/movie?id=${id}`}>
        <div className="card" id={`movie-${id}`} onMouseEnter={this.prefetchMoviePage}>
          <div className="card-image">
            <Image src={getImageSrc(poster_path, 342)} alt={`Poster for ${title}`} className="img-responsive" />
          </div>
          <div className="card-header">
            <div className="card-title h5 text-primary text-ellipsis">{title}</div>
          </div>
          <div className="card-body text-ellipsis">{overview}</div>
        </div>
      </Link>
    );
  }
}

export default Movie;

Oops.js

import React from 'react';

const Oops = () => (
  <div className="card">
    <div className="card-header">
      <div className="card-title h3 text-gray">
        Oops! Looks like you're offline and this page is not cached either. Try again when you're online.
      </div>
    </div>
  </div>
);

export default Oops;