Merge pull request #194 from namecheap/fixTransitionToAsyncLoadedFrag…

…ment fix: destroy spinner when exists contentful data
namecheap · Aug 20, 2020 · 83e5d58 · 83e5d58
2 parents 915f192 + 29c303e
commit 83e5d58
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 8 deletions.
diff --git a/ilc/client/handlePageTransaction.js b/ilc/client/handlePageTransaction.js
@@ -52,19 +52,22 @@ const addContentListener = slotName => {
  }
 
  const observer = new MutationObserver((mutationsList, observer) => {
- for (let mutation of mutationsList) {
- if (mutation.addedNodes.length) {
- observer.disconnect();
- contentListeners.splice(contentListeners.indexOf(observer), 1);
- !contentListeners.length && onAllSlotsLoaded();
- }
- }
+ const hasAddedNodes = !!mutationsList.find(mutation => mutation.addedNodes.length);
+ if (!hasAddedNodes) return;
+
+ const hasText = !!targetNode.innerText.trim().length
+ const hasOpticNodes = !!targetNode.querySelector(':not(div):not(span)');
+ if (!hasText && !hasOpticNodes) return;
+
+ observer.disconnect();
+ contentListeners.splice(contentListeners.indexOf(observer), 1);
+ !contentListeners.length && onAllSlotsLoaded();
  });
  contentListeners.push(observer);
  const targetNode = getSlotElement(slotName);
  targetNode.style.display = 'none'; // we will show all new slots, only when all will be settled
  hiddenSlots.push(targetNode);
- observer.observe(targetNode, { childList: true });
+ observer.observe(targetNode, { childList: true, subtree: true });
 };
 
 const renderFakeSlot = slotName => {

diff --git a/ilc/client/handlePageTransaction.spec.js b/ilc/client/handlePageTransaction.spec.js
@@ -261,4 +261,69 @@ describe('handle page transaction', () => {
  chai.expect(slots.body.getComputedStyle().display).to.be.equal('block');
  chai.expect(slots.body.getAttributeName()).to.be.null;
  });
+
+ it('should destroy spinner when all fragments contain text nodes', async () => {
+ const newBodyApplicationWithoutContent = {
+ id: 'new-body-application',
+ class: 'new-body-spa',
+ };
+
+ newBodyApplicationWithoutContent.ref = html`
+ <div id="${newBodyApplicationWithoutContent.id}" class="${newBodyApplicationWithoutContent.class}">
+ </div>
+ `;
+
+ applications.navbar.appendApplication();
+ applications.body.appendApplication();
+
+ handlePageTransaction(slots.body.id, slotWillBe.rerendered);
+
+ applications.body.removeApplication();
+ await clock.runAllAsync();
+
+ chai.expect(spinner.getRef()).to.be.not.null;
+
+ slots.body.ref.appendChild(newBodyApplicationWithoutContent.ref);
+ await clock.runAllAsync();
+
+ chai.expect(spinner.getRef()).to.be.not.null;
+
+ document.getElementById(newBodyApplicationWithoutContent.id).innerText = 'Hello! I am contentful text, so now spinner will be removed';
+ await clock.runAllAsync();
+
+ chai.expect(spinner.getRef()).to.be.null;
+ });
+
+ it('should destroy spinner when all fragments contain optic nodes, e.g. input, select, img etc', async () => {
+ const newBodyApplicationWithoutContent = {
+ id: 'new-body-application',
+ class: 'new-body-spa',
+ };
+
+ newBodyApplicationWithoutContent.ref = html`
+ <div id="${newBodyApplicationWithoutContent.id}" class="${newBodyApplicationWithoutContent.class}">
+ </div>
+ `;
+
+ applications.navbar.appendApplication();
+ applications.body.appendApplication();
+
+ handlePageTransaction(slots.body.id, slotWillBe.rerendered);
+
+ applications.body.removeApplication();
+ await clock.runAllAsync();
+
+ chai.expect(spinner.getRef()).to.be.not.null;
+
+ slots.body.ref.appendChild(newBodyApplicationWithoutContent.ref);
+ await clock.runAllAsync();
+
+ chai.expect(spinner.getRef()).to.be.not.null;
+
+ const elInput = document.createElement('input');
+ document.getElementById(newBodyApplicationWithoutContent.id).appendChild(elInput);
+ await clock.runAllAsync();
+
+ chai.expect(spinner.getRef()).to.be.null;
+ });
 });