Merge pull request #166 from Automattic/more-reliable-loading

akirk · web-flow · commit b8ec7f2c4507 · 2023-01-25T16:58:01.000+01:00
Using setTimeout loads the iframe more reliably
diff --git a/frontend/block/view.ts b/frontend/block/view.ts
@@ -9,7 +9,7 @@ declare global {
     }
 }
 
-window.addEventListener('load', () => {
+window.addEventListener('DOMContentLoaded', () => {
     const config = window.ChatrixBlockConfig;
     if (!config) {
         throw "ChatrixBlockConfig is not defined";
@@ -25,5 +25,6 @@ window.addEventListener('load', () => {
         attributes: config.attributes,
     };
 
-    renderBlock(containerId, props);
+    // See https://github.com/Automattic/chatrix/issues/161 for why we use a timeout here.
+    setTimeout( () => renderBlock(containerId, props), 1 );
 });

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ declare global {`
`9`	`9`	`}`
`10`	`10`	`}`
`11`	`11`
`12`		`-window.addEventListener('load', () => {`
	`12`	`+window.addEventListener('DOMContentLoaded', () => {`
`13`	`13`	`const config = window.ChatrixBlockConfig;`
`14`	`14`	`if (!config) {`
`15`	`15`	`throw "ChatrixBlockConfig is not defined";`
`@@ -25,5 +25,6 @@ window.addEventListener('load', () => {`
`25`	`25`	`attributes: config.attributes,`
`26`	`26`	`};`
`27`	`27`
`28`		`- renderBlock(containerId, props);`
	`28`	`+ // See https://github.com/Automattic/chatrix/issues/161 for why we use a timeout here.`
	`29`	`+ setTimeout( () => renderBlock(containerId, props), 1 );`
`29`	`30`	`});`