From e805cf2fc9229db195c6b9efe0c1169adcc390d3 Mon Sep 17 00:00:00 2001
From: Dan Miller <danjm.com@gmail.com>
Date: Wed, 28 Apr 2021 10:26:19 -0230
Subject: [PATCH] Set width and height on whats-new-popup image, instead of
 setting state on img load

---
 shared/notifications/index.js                 |  6 +-
 .../app/whats-new-popup/whats-new-popup.js    | 63 +++++++++----------
 2 files changed, 35 insertions(+), 34 deletions(-)

diff --git a/shared/notifications/index.js b/shared/notifications/index.js
index 19e0f57f4a0f..482ce510bc01 100644
--- a/shared/notifications/index.js
+++ b/shared/notifications/index.js
@@ -3,7 +3,11 @@ export const UI_NOTIFICATIONS = {
   1: {
     id: 1,
     date: '2020-03-17',
-    image: 'images/mobile-link-qr.svg',
+    image: {
+      src: 'images/mobile-link-qr.svg',
+      height: '270px',
+      width: '270px',
+    },
   },
   2: {
     id: 2,
diff --git a/ui/app/components/app/whats-new-popup/whats-new-popup.js b/ui/app/components/app/whats-new-popup/whats-new-popup.js
index 2abb9bdd661d..f1ba22a6003a 100644
--- a/ui/app/components/app/whats-new-popup/whats-new-popup.js
+++ b/ui/app/components/app/whats-new-popup/whats-new-popup.js
@@ -41,7 +41,6 @@ export default function WhatsNewPopup({ onClose }) {
   const notifications = useSelector(getSortedNotificationsToShow);
 
   const [seenNotifications, setSeenNotifications] = useState({});
-  const [imageLoaded, setImageLoaded] = useState(!notifications[0].image);
 
   const popoverRef = useRef();
 
@@ -59,40 +58,37 @@ export default function WhatsNewPopup({ onClose }) {
   );
 
   useEffect(() => {
-    let observer;
-    if (imageLoaded) {
-      observer = new window.IntersectionObserver(
-        (entries, _observer) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              const [id, ref] = Object.entries(idRefMap).find(([_, _ref]) =>
-                _ref.current.isSameNode(entry.target),
-              );
-
-              setSeenNotifications((_seenNotifications) => ({
-                ..._seenNotifications,
-                [id]: true,
-              }));
-
-              _observer.unobserve(ref.current);
-            }
-          });
-        },
-        {
-          root: popoverRef.current,
-          threshold: 1.0,
-        },
-      );
-
-      Object.values(idRefMap).forEach((ref) => {
-        observer.observe(ref.current);
-      });
-    }
+    const observer = new window.IntersectionObserver(
+      (entries, _observer) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const [id, ref] = Object.entries(idRefMap).find(([_, _ref]) =>
+              _ref.current.isSameNode(entry.target),
+            );
+
+            setSeenNotifications((_seenNotifications) => ({
+              ..._seenNotifications,
+              [id]: true,
+            }));
+
+            _observer.unobserve(ref.current);
+          }
+        });
+      },
+      {
+        root: popoverRef.current,
+        threshold: 1.0,
+      },
+    );
+
+    Object.values(idRefMap).forEach((ref) => {
+      observer.observe(ref.current);
+    });
 
     return () => {
       observer?.disconnect();
     };
-  }, [idRefMap, setSeenNotifications, imageLoaded]);
+  }, [idRefMap, setSeenNotifications]);
 
   const renderFirstNotification = (notification, id, date) => {
     return (
@@ -106,8 +102,9 @@ export default function WhatsNewPopup({ onClose }) {
         {notification.image && (
           <img
             className="whats-new-popup__notification-image"
-            src={notification.image}
-            onLoad={() => setImageLoaded(true)}
+            src={notification.image.src}
+            height={notification.image.height}
+            width={notification.image.width}
           />
         )}
         <div className="whats-new-popup__notification-title">