From fc9c8d763c8cab12648c3e5e41104b89888505d7 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Fri, 28 Sep 2018 11:37:18 +0300
Subject: [PATCH] SearchPage: load off-screen images after user has scrolled
 the page.

---
 src/components/ListingCard/ListingCard.js          | 14 +++++++++++---
 .../__snapshots__/ListingCard.test.js.snap         |  5 +----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/ListingCard/ListingCard.js b/src/components/ListingCard/ListingCard.js
index c80742f6..c68a1a7a 100644
--- a/src/components/ListingCard/ListingCard.js
+++ b/src/components/ListingCard/ListingCard.js
@@ -1,14 +1,15 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { string, func } from 'prop-types';
 import { FormattedMessage, intlShape, injectIntl } from 'react-intl';
 import classNames from 'classnames';
-import { NamedLink, ResponsiveImage } from '../../components';
+import { lazyLoadWithDimensions } from '../../util/contextHelpers';
 import { propTypes } from '../../util/types';
 import { formatMoney } from '../../util/currency';
 import { ensureListing, ensureUser } from '../../util/data';
 import { richText } from '../../util/richText';
 import { createSlug } from '../../util/urlHelpers';
 import config from '../../config';
+import { NamedLink, ResponsiveImage } from '../../components';
 
 import css from './ListingCard.css';
 
@@ -33,6 +34,13 @@ const priceData = (price, intl) => {
   return {};
 };
 
+class ListingImage extends Component {
+  render() {
+    return <ResponsiveImage {...this.props} />;
+  }
+}
+const LazyImage = lazyLoadWithDimensions(ListingImage, { loadAfterInitialRendering: 3000 });
+
 export const ListingCardComponent = props => {
   const { className, rootClassName, intl, listing, renderSizes, setActiveListing } = props;
   const classes = classNames(rootClassName || css.root, className);
@@ -55,7 +63,7 @@ export const ListingCardComponent = props => {
         onMouseLeave={() => setActiveListing(null)}
       >
         <div className={css.aspectWrapper}>
-          <ResponsiveImage
+          <LazyImage
             rootClassName={css.rootForImage}
             alt={title}
             image={firstImage}
diff --git a/src/components/ListingCard/__snapshots__/ListingCard.test.js.snap b/src/components/ListingCard/__snapshots__/ListingCard.test.js.snap
index bc5d4ac9..1e9c0098 100644
--- a/src/components/ListingCard/__snapshots__/ListingCard.test.js.snap
+++ b/src/components/ListingCard/__snapshots__/ListingCard.test.js.snap
@@ -16,12 +16,9 @@ exports[`ListingCard matches snapshot 1`] = `
     onMouseLeave={[Function]}
   >
     <div>
-      <ResponsiveImage
+      <lazyLoadWithDimensions(ListingImage)
         alt="listing1 title"
-        className={null}
         image={null}
-        noImageMessage={null}
-        rootClassName={null}
         sizes={null}
         variants={
           Array [