From 83185ec320900df5aae9829a1e95446842e6832a Mon Sep 17 00:00:00 2001
From: Robert DeLuca <robertdeluca19@gmail.com>
Date: Fri, 28 Aug 2020 13:36:53 -0500
Subject: [PATCH] fix: Remove `loading` attributes from cloned iframes (#555)

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            | 4 +++-
 test/unit/percy-agent-client/dom.test.ts | 5 +++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/percy-agent-client/dom.ts b/src/percy-agent-client/dom.ts
index 3566ac5b..32dd0cd3 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,9 @@ class DOM {
       } else if (!enableJavaScript && builtWithJs) {
         cloned!.remove()
       }
+
+      // Remove any lazy loading attributes, since they hang asset discovery
+      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