From d8a78f1aabd25fc35f8abdebb5fb2705fbeb2ea9 Mon Sep 17 00:00:00 2001
From: Gavin Lazar Suntop <gavin@gsuntop.com>
Date: Tue, 21 May 2019 09:54:01 -0700
Subject: [PATCH 1/3] check image container measurements until they exist

---
 .../DSImage/DSImage.jsx                       | 25 ++++++++++++++++---
 .../DiscoveryStreamComponents/List/_List.scss |  1 +
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/content-src/components/DiscoveryStreamComponents/DSImage/DSImage.jsx b/content-src/components/DiscoveryStreamComponents/DSImage/DSImage.jsx
index 0204076fa3..46a3788d7e 100644
--- a/content-src/components/DiscoveryStreamComponents/DSImage/DSImage.jsx
+++ b/content-src/components/DiscoveryStreamComponents/DSImage/DSImage.jsx
@@ -18,10 +18,27 @@ export class DSImage extends React.PureComponent {
     if (this.state) {
       if (entries.some(entry => entry.isIntersecting)) {
         if (this.props.optimize) {
-          this.setState({
-            containerWidth: ReactDOM.findDOMNode(this).clientWidth,
-            containerHeight: ReactDOM.findDOMNode(this).clientHeight,
-          });
+          let clientWidth;
+          let clientHeight;
+          let nonZeroed = false;
+
+          let checkMeasurements = () => {
+            clientWidth = ReactDOM.findDOMNode(this).clientWidth;
+            clientHeight = ReactDOM.findDOMNode(this).clientHeight;
+          }
+
+          while(!nonZeroed) {
+            checkMeasurements();
+
+            if (clientWidth && clientHeight) {
+              nonZeroed = true;
+
+              this.setState({
+                containerWidth: clientWidth,
+                containerHeight: clientHeight,
+              });
+            }
+          }
         }
 
         this.setState({
diff --git a/content-src/components/DiscoveryStreamComponents/List/_List.scss b/content-src/components/DiscoveryStreamComponents/List/_List.scss
index e30744cc91..8fc74b6cb4 100644
--- a/content-src/components/DiscoveryStreamComponents/List/_List.scss
+++ b/content-src/components/DiscoveryStreamComponents/List/_List.scss
@@ -219,6 +219,7 @@ $item-line-height: 20;
     margin: 0;
   }
 
+
   .ds-list-item-info,
   .ds-list-item-context {
     @include limit-visibile-lines(1, $item-line-height, $item-font-size);

From c69d4b4c9a8b8f2132298b77f7ed4a84eea5e99e Mon Sep 17 00:00:00 2001
From: Gavin Lazar Suntop <gavin@gsuntop.com>
Date: Tue, 21 May 2019 09:54:59 -0700
Subject: [PATCH 2/3] lint

---
 content-src/components/DiscoveryStreamComponents/List/_List.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/content-src/components/DiscoveryStreamComponents/List/_List.scss b/content-src/components/DiscoveryStreamComponents/List/_List.scss
index 8fc74b6cb4..e30744cc91 100644
--- a/content-src/components/DiscoveryStreamComponents/List/_List.scss
+++ b/content-src/components/DiscoveryStreamComponents/List/_List.scss
@@ -219,7 +219,6 @@ $item-line-height: 20;
     margin: 0;
   }
 
-
   .ds-list-item-info,
   .ds-list-item-context {
     @include limit-visibile-lines(1, $item-line-height, $item-font-size);

From 69cd96c1e6fdcb73608bcd21b46ce0f7572158ce Mon Sep 17 00:00:00 2001
From: Gavin Lazar Suntop <gavin@gsuntop.com>
Date: Tue, 21 May 2019 09:57:51 -0700
Subject: [PATCH 3/3] set max for checks to prevent infinite loop

---
 .../components/DiscoveryStreamComponents/DSImage/DSImage.jsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/content-src/components/DiscoveryStreamComponents/DSImage/DSImage.jsx b/content-src/components/DiscoveryStreamComponents/DSImage/DSImage.jsx
index 46a3788d7e..14a52737d9 100644
--- a/content-src/components/DiscoveryStreamComponents/DSImage/DSImage.jsx
+++ b/content-src/components/DiscoveryStreamComponents/DSImage/DSImage.jsx
@@ -21,13 +21,16 @@ export class DSImage extends React.PureComponent {
           let clientWidth;
           let clientHeight;
           let nonZeroed = false;
+          let checks = 0;
+          const checkMax = 60;
 
           let checkMeasurements = () => {
             clientWidth = ReactDOM.findDOMNode(this).clientWidth;
             clientHeight = ReactDOM.findDOMNode(this).clientHeight;
+            checks++;
           }
 
-          while(!nonZeroed) {
+          while(!nonZeroed && checks < checkMax) {
             checkMeasurements();
 
             if (clientWidth && clientHeight) {