From 5a920359c4e684616fb863c61df8470209afc58a Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Thu, 19 Jul 2018 17:16:07 +0300
Subject: [PATCH 1/4] Fix Google Static Map API max height

---
 src/containers/ListingPage/ListingPage.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/containers/ListingPage/ListingPage.css b/src/containers/ListingPage/ListingPage.css
index 7a745f7a..d28bbc5e 100644
--- a/src/containers/ListingPage/ListingPage.css
+++ b/src/containers/ListingPage/ListingPage.css
@@ -531,8 +531,9 @@
   height: calc(100vh - 193px);
   width: 100%;
 
-  /* Static map: max-width is 640px */
+  /* Static map: dimensions are 640px */
   max-width: 640px;
+  max-height: 640px;
   background-color: #eee;
 
   @media (--viewportMedium) {

From d5e4cacc7f766dfbf5d831c489ac205e04e7e445 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Thu, 19 Jul 2018 17:19:54 +0300
Subject: [PATCH 2/4] Lazy load component if it's vertically near viewport

---
 src/util/contextHelpers.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/util/contextHelpers.js b/src/util/contextHelpers.js
index 40f99e1e..fa42377a 100644
--- a/src/util/contextHelpers.js
+++ b/src/util/contextHelpers.js
@@ -87,6 +87,10 @@ export const lazyLoadWithDimensions = (Component, options) => {
   // First render default wait after mounting (small wait for styled paint)
   const RENDER_WAIT_MS = 100;
 
+  // Scrolling and other events that affect to viewport location have this safety margin
+  // for lazy loading
+  const NEAR_VIEWPORT_MARGIN = 50;
+
   class LazyLoadWithDimensionsComponent extends ReactComponent {
     constructor(props) {
       super(props);
@@ -96,8 +100,8 @@ export const lazyLoadWithDimensions = (Component, options) => {
       this.state = { width: 0, height: 0 };
 
       this.handleWindowResize = this.handleWindowResize.bind(this);
-      this.isElementInViewport = this.isElementInViewport.bind(this);
       this.setDimensions = throttle(this.setDimensions.bind(this), THROTTLE_WAIT_MS);
+      this.isElementNearViewport = this.isElementNearViewport.bind(this);
     }
 
     componentDidMount() {
@@ -106,8 +110,8 @@ export const lazyLoadWithDimensions = (Component, options) => {
       window.addEventListener('orientationchange', this.handleWindowResize);
 
       this.defaultRenderTimeout = window.setTimeout(() => {
-        if (this.isElementInViewport()) {
-          this.handleWindowResize();
+        if (this.isElementNearViewport(0)) {
+          this.setDimensions();
         }
       }, RENDER_WAIT_MS);
     }
@@ -120,7 +124,9 @@ export const lazyLoadWithDimensions = (Component, options) => {
     }
 
     handleWindowResize() {
-      this.setDimensions();
+      if (this.isElementNearViewport(NEAR_VIEWPORT_MARGIN)) {
+        this.setDimensions();
+      }
     }
 
     setDimensions() {
@@ -130,15 +136,14 @@ export const lazyLoadWithDimensions = (Component, options) => {
       });
     }
 
-    isElementInViewport() {
+    isElementNearViewport(safetyBoundary) {
       if (this.element) {
         const rect = this.element.getBoundingClientRect();
+        const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
 
         return (
-          rect.top >= 0 &&
-          rect.left >= 0 &&
-          rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-          rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+          (rect.top >= 0 && rect.top <= viewportHeight + safetyBoundary) ||
+          (rect.bottom >= -1 * safetyBoundary && rect.bottom <= viewportHeight)
         );
       }
       return false;

From 3740a6e32e4a4311993e11858c29563a3613cb1f Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Thu, 19 Jul 2018 17:20:45 +0300
Subject: [PATCH 3/4] Throttle event listener method, not setting dimensions

---
 src/util/contextHelpers.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/util/contextHelpers.js b/src/util/contextHelpers.js
index fa42377a..03d1c261 100644
--- a/src/util/contextHelpers.js
+++ b/src/util/contextHelpers.js
@@ -99,9 +99,9 @@ export const lazyLoadWithDimensions = (Component, options) => {
 
       this.state = { width: 0, height: 0 };
 
-      this.handleWindowResize = this.handleWindowResize.bind(this);
-      this.setDimensions = throttle(this.setDimensions.bind(this), THROTTLE_WAIT_MS);
+      this.handleWindowResize = throttle(this.handleWindowResize.bind(this), THROTTLE_WAIT_MS);
       this.isElementNearViewport = this.isElementNearViewport.bind(this);
+      this.setDimensions = this.setDimensions.bind(this);
     }
 
     componentDidMount() {

From ab8198796beb60c7ebc120eb4e926f8517837e15 Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Thu, 19 Jul 2018 17:33:36 +0300
Subject: [PATCH 4/4] Update Changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e7e31edc..519e3d58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,10 @@ way to update this template, but currently, we follow a pattern:
 
 ---
 
+## v1.2.1
+* [fix] Lazy load map only if the map is near current viewport.
+  [#871](https://github.com/sharetribe/flex-template-web/pull/871)
+
 ## v1.2.0
 * [change] Use Google's static map on ListingPage.
   This is a reaction to pricing change of Google Maps APIs.