From 8f0229912aa89cd90084d3aac3180595f602ecf6 Mon Sep 17 00:00:00 2001
From: Gavin Suntop <gavin@gsuntop.com>
Date: Tue, 16 Aug 2022 19:30:56 +0000
Subject: [PATCH] Bug 1783024 - Tweaked load order for Save To Pocket
 r=thecount

Differential Revision: https://phabricator.services.mozilla.com/D154667
---
 .../panels/js/components/Saved/Saved.jsx      | 37 ++++++++++++-------
 .../pocket/content/panels/js/main.bundle.js   | 10 +++--
 browser/components/pocket/content/pktApi.jsm  |  6 +++
 browser/components/pocket/content/pktUI.js    | 25 +++++++++----
 4 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx b/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx
index 6a573345da30d..227f489a83200 100644
--- a/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx
+++ b/browser/components/pocket/content/panels/js/components/Saved/Saved.jsx
@@ -22,6 +22,7 @@ function Saved(props) {
     setRemovedStatusState,
   ] = useState({});
   const [savedStory, setSavedStoryState] = useState();
+  const [articleInfoAttempted, setArticleInfoAttempted] = useState();
   const [{ similarRecs, similarRecsModel }, setSimilarRecsState] = useState({});
   const utmParams = `utm_source=${utmSource}${
     utmCampaign && utmContent
@@ -80,10 +81,16 @@ function Saved(props) {
       });
     });
 
-    panelMessaging.addMessageListener("PKT_renderSavedStory", function(resp) {
+    panelMessaging.addMessageListener("PKT_articleInfoFetched", function(resp) {
       setSavedStoryState(resp?.data?.item_preview);
     });
 
+    panelMessaging.addMessageListener("PKT_getArticleInfoAttempted", function(
+      resp
+    ) {
+      setArticleInfoAttempted(true);
+    });
+
     panelMessaging.addMessageListener("PKT_renderItemRecs", function(resp) {
       const { data } = resp;
 
@@ -144,19 +151,21 @@ function Saved(props) {
                 utmParams={utmParams}
               />
             )}
-            <TagPicker tags={[]} itemUrl={itemUrl} />
-            {similarRecs?.length && locale?.startsWith("en") && (
-              <>
-                <hr />
-                <h3 className="header_medium">Similar Stories</h3>
-                <ArticleList
-                  articles={similarRecs}
-                  source="on_save_recs"
-                  model={similarRecsModel}
-                  utmParams={utmParams}
-                />
-              </>
-            )}
+            {articleInfoAttempted && <TagPicker tags={[]} itemUrl={itemUrl} />}
+            {articleInfoAttempted &&
+              similarRecs?.length &&
+              locale?.startsWith("en") && (
+                <>
+                  <hr />
+                  <h3 className="header_medium">Similar Stories</h3>
+                  <ArticleList
+                    articles={similarRecs}
+                    source="on_save_recs"
+                    model={similarRecsModel}
+                    utmParams={utmParams}
+                  />
+                </>
+              )}
           </>
         )}
         {savedStatus === "loading" && (
diff --git a/browser/components/pocket/content/panels/js/main.bundle.js b/browser/components/pocket/content/panels/js/main.bundle.js
index a0c811e96a23b..3530aa3efa03d 100644
--- a/browser/components/pocket/content/panels/js/main.bundle.js
+++ b/browser/components/pocket/content/panels/js/main.bundle.js
@@ -904,6 +904,7 @@ function Saved(props) {
     removedErrorMessage
   }, setRemovedStatusState] = (0,react.useState)({});
   const [savedStory, setSavedStoryState] = (0,react.useState)();
+  const [articleInfoAttempted, setArticleInfoAttempted] = (0,react.useState)();
   const [{
     similarRecs,
     similarRecsModel
@@ -966,9 +967,12 @@ function Saved(props) {
         savedErrorId: ""
       });
     });
-    messages.addMessageListener("PKT_renderSavedStory", function (resp) {
+    messages.addMessageListener("PKT_articleInfoFetched", function (resp) {
       setSavedStoryState(resp?.data?.item_preview);
     });
+    messages.addMessageListener("PKT_getArticleInfoAttempted", function (resp) {
+      setArticleInfoAttempted(true);
+    });
     messages.addMessageListener("PKT_renderItemRecs", function (resp) {
       const {
         data
@@ -1024,10 +1028,10 @@ function Saved(props) {
     articles: [savedStory],
     openInPocketReader: true,
     utmParams: utmParams
-  }), /*#__PURE__*/react.createElement(TagPicker_TagPicker, {
+  }), articleInfoAttempted && /*#__PURE__*/react.createElement(TagPicker_TagPicker, {
     tags: [],
     itemUrl: itemUrl
-  }), similarRecs?.length && locale?.startsWith("en") && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("hr", null), /*#__PURE__*/react.createElement("h3", {
+  }), articleInfoAttempted && similarRecs?.length && locale?.startsWith("en") && /*#__PURE__*/react.createElement(react.Fragment, null, /*#__PURE__*/react.createElement("hr", null), /*#__PURE__*/react.createElement("h3", {
     className: "header_medium"
   }, "Similar Stories"), /*#__PURE__*/react.createElement(ArticleList_ArticleList, {
     articles: similarRecs,
diff --git a/browser/components/pocket/content/pktApi.jsm b/browser/components/pocket/content/pktApi.jsm
index 560078c505463..6a667c5e860a0 100644
--- a/browser/components/pocket/content/pktApi.jsm
+++ b/browser/components/pocket/content/pktApi.jsm
@@ -309,6 +309,11 @@ var pktApi = (function() {
     request.open("POST", url, true);
     request.onreadystatechange = function(e) {
       if (request.readyState == 4) {
+        // "done" is a completed XHR regardless of success/error:
+        if (options.done) {
+          options.done();
+        }
+
         if (request.status === 200) {
           // There could still be an error if the response is no valid json
           // or does not have status = 1
@@ -483,6 +488,7 @@ var pktApi = (function() {
         }
       },
       error: options.error,
+      done: options.done,
     });
   }
 
diff --git a/browser/components/pocket/content/pktUI.js b/browser/components/pocket/content/pktUI.js
index 66980663ad80c..f98e4138c09eb 100644
--- a/browser/components/pocket/content/pktUI.js
+++ b/browser/components/pocket/content/pktUI.js
@@ -382,16 +382,27 @@ var pktUI = (function() {
         SaveToPocket.itemSaved();
 
         if (
-          item?.resolved_id &&
-          item?.resolved_id !== "0" &&
           NimbusFeatures.saveToPocket.getVariable("layoutRefresh") &&
           !NimbusFeatures.saveToPocket.getVariable("hideRecentSaves")
         ) {
-          pktApi.getArticleInfo(item.resolved_url, {
-            success(data) {
-              pktUIMessaging.sendMessageToPanel("PKT_renderSavedStory", data);
-            },
-          });
+          // Articles saved for the first time (by anyone) won't have a resolved_id
+          if (item?.resolved_id && item?.resolved_id !== "0") {
+            pktApi.getArticleInfo(item.resolved_url, {
+              success(data) {
+                pktUIMessaging.sendMessageToPanel(
+                  "PKT_articleInfoFetched",
+                  data
+                );
+              },
+              done() {
+                pktUIMessaging.sendMessageToPanel(
+                  "PKT_getArticleInfoAttempted"
+                );
+              },
+            });
+          } else {
+            pktUIMessaging.sendMessageToPanel("PKT_getArticleInfoAttempted");
+          }
         }
 
         getAndShowRecsForItem(item, {