Merge remote-tracking branch 'origin/fixShowContainersTiming' into to…

…pAndBottom3
adobe · Sep 23, 2023 · 300cf11 · 300cf11
2 parents bda7033 + 2e08077
commit 300cf11
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 9 deletions.
diff --git a/src/components/Personalization/createFetchDataHandler.js b/src/components/Personalization/createFetchDataHandler.js
@@ -69,15 +69,12 @@ export default ({
           [...pagePropositions, ...currentViewPropositions],
           nonRenderedPropositions
         ));
-        render()
-          .then(decisionsMeta => {
-            showContainers();
-            handleNotifications(decisionsMeta);
-          })
-          .catch(e => {
-            showContainers();
-            throw e;
-          });
+        render().then(handleNotifications);
+
+        // Render could take a long time especially if one of the renders
+        // is waiting for html to appear on the page. We show the containers
+        // immediately, and whatever renders quickly will not have flicker.
+        showContainers();
       } else {
         ({ returnedPropositions, returnedDecisions } = processPropositions(
           [],

diff --git a/test/unit/specs/components/Personalization/createFetchDataHandler.spec.js b/test/unit/specs/components/Personalization/createFetchDataHandler.spec.js
@@ -13,6 +13,7 @@ governing permissions and limitations under the License.
 import createFetchDataHandler from "../../../../../src/components/Personalization/createFetchDataHandler";
 import injectCreateProposition from "../../../../../src/components/Personalization/handlers/injectCreateProposition";
 import flushPromiseChains from "../../../helpers/flushPromiseChains";
+import defer from "../../../../../src/utils/defer";
 
 describe("Personalization::createFetchDataHandler", () => {
   let prehidingStyle;
@@ -149,4 +150,42 @@ describe("Personalization::createFetchDataHandler", () => {
       viewName: "myviewname"
     });
   });
+
+  it("should show containers immediately", async () => {
+    personalizationDetails.isRenderDecisions.and.returnValue(true);
+    const renderDeferred = defer();
+    processPropositions = () => {
+      return {
+        render: () => renderDeferred.promise,
+        returnedPropositions: [
+          {
+            id: "handle2",
+            scope: "__view__",
+            items: ["item1"],
+            renderAttempted: true
+          }
+        ],
+        returnedDecisions: []
+      };
+    };
+    run();
+    response.getPayloadsByType.and.returnValue([
+      {
+        id: "handle2",
+        scope: "__view__",
+        items: ["item1"]
+      }
+    ]);
+    cacheUpdate.update.and.returnValue([]);
+    expect(showContainers).not.toHaveBeenCalled();
+    returnResponse();
+    expect(showContainers).toHaveBeenCalled();
+    expect(collect).not.toHaveBeenCalled();
+    renderDeferred.resolve([{ id: "handle2" }]);
+    await flushPromiseChains();
+    expect(collect).toHaveBeenCalledOnceWith({
+      decisionsMeta: [{ id: "handle2" }],
+      viewName: undefined
+    });
+  });
 });