From e571d38b0933d8e69a182abbf9771c9ea12b50ed Mon Sep 17 00:00:00 2001
From: Robert DeLuca <robertdeluca19@gmail.com>
Date: Fri, 28 Aug 2020 11:27:21 -0500
Subject: [PATCH] fix: Remove `loading` attributes from cloned iframes

This attribute causes asset discovery to hang and eventually timeout since we
don't scroll the page. Removing the attribute is ideally what we want (to load
the iframe).
---
 src/percy-agent-client/dom.ts            | 6 +++++-
 test/unit/percy-agent-client/dom.test.ts | 5 +++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/percy-agent-client/dom.ts b/src/percy-agent-client/dom.ts
index 3566ac5b..cb8d02d5 100644
--- a/src/percy-agent-client/dom.ts
+++ b/src/percy-agent-client/dom.ts
@@ -169,7 +169,6 @@ class DOM {
       // rerendered and do not effect the visuals of a page
       if (clonedDOM.head.contains(cloned)) {
         cloned!.remove()
-
       // if the frame document is accessible, we can serialize it
       } else if (frame.contentDocument) {
         // js is enabled and this frame was built with js, don't serialize it
@@ -188,6 +187,11 @@ class DOM {
       } else if (!enableJavaScript && builtWithJs) {
         cloned!.remove()
       }
+
+      // Remove any lazy loading attributes, since they hang asset discovery
+      if (cloned!.getAttribute('loading')) {
+        cloned!.removeAttribute('loading')
+      }
     }
   }
 
diff --git a/test/unit/percy-agent-client/dom.test.ts b/test/unit/percy-agent-client/dom.test.ts
index e493ecd8..2f792f70 100644
--- a/test/unit/percy-agent-client/dom.test.ts
+++ b/test/unit/percy-agent-client/dom.test.ts
@@ -336,6 +336,7 @@ describe('DOM -', () => {
         createExample(`
           <iframe id="frame-external" src="https://example.com"></iframe>
           <iframe id="frame-input" srcdoc="<input/>"></iframe>
+          <iframe id="frame-lazy" srcdoc="<input/>" loading="lazy"></iframe>
           <iframe id="frame-js" src="javascript:void(
             this.document.body.innerHTML = '<p>made with js src</p>'
           )"></iframe>
@@ -386,6 +387,10 @@ describe('DOM -', () => {
         expect($dom('#frame-js-inject')).to.not.have.length
       })
 
+      it('removes loading attributes on iframes', () => {
+        expect($dom('#frame-lazy').attr('loading')).to.be.undefined
+      })
+
       it('does not serialize iframes with CORS', () => {
         expect($dom('#frame-external').attr('src')).to.equal('https://example.com')
         expect($dom('#frame-external').attr('srcdoc')).to.be.undefined