diff --git a/src/components/Personalization/createFetchDataHandler.js b/src/components/Personalization/createFetchDataHandler.js index e2b9609fe..0c844e9ed 100644 --- 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 index 74559a5a8..4d4b583a9 100644 --- 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 + }); + }); });