Change the mechanism how BigPipe detects the last pagelet

This commit is a preparation for a few further commits and changes the mechanism how the BigPipe javascript library detects the last flushed pagelet from server. Previously, there was a "IS_LAST:true" property in the JSON encoded pagelet object. However, this meant that when the pagelet was sent to the client, the server already needed to know at this point that this is the last pagelet. This can no longer be reliably determined in the future due to smaller restructuring.

Instead of sending "IS_LAST:true" within the JSON encoded pagelet object of the last pagelet, the BigPipe::render() method on the server will display a <script> element which calls "BigPipe.onLastPageletArrived()" after all pagelets have been flushed. This call informs the javascript library that the last pagelet has been flushed and arrived at the client. This is required because the BigPipe javascript library otherwise doesn't know that the last pagelet has been arrived (the javascript library waits for all pagelets to be flushed and displayed until it begins to execute the external javascript resources of every pagelet).

1 files changed, 18 insertions, 9 deletions

diff --git a/static/bigpipe.js b/static/bigpipe.js
index ae15935..86d1cbe 100644
--- a/static/bigpipe.js
+++ b/static/bigpipe.js
@@ -270,6 +270,7 @@ BigPipe = (function() {
 		phase: 0,
 		done: [],
 		wait: [],
+		interval: null,
 
 		onPageletArrive(data, codeContainer) {
 			let pageletHTML = codeContainer.innerHTML;
@@ -284,10 +285,6 @@ BigPipe = (function() {
 				this.phase = 1;
 			}
 
-			if(data.IS_LAST) {
-				this.phase = 2;
-			}
-
 			if(pagelet.NEED.length === 0 || pagelet.NEED.every(function(needID) {
 					return BigPipe.done.indexOf(needID) !== -1;
 				})) {
@@ -299,6 +296,17 @@ BigPipe = (function() {
 			}
 		},
 
+		onLastPageletArrived() {
+			this.phase = 2;
+
+			this.interval = setInterval(() => {
+				if(this.done.length === this.pagelets.length) {
+					clearInterval(this.interval);
+					this.executeJavascriptResources();
+				}
+			}, 50);
+		},
+
 		onPageletHTMLreplaced(pageletID) {
 			BigPipe.done.push(pageletID);
 
@@ -314,11 +322,6 @@ BigPipe = (function() {
 					pagelet.execute();
 				}
 			}
-
-			// Check if this was the last pagelet and then execute loading of the external JS resources
-			if(BigPipe.phase === 2 && BigPipe.done.length === BigPipe.pagelets.length) {
-				BigPipe.executeJavascriptResources();
-			}
 		},
 
 		executeJavascriptResources() {
@@ -340,6 +343,10 @@ BigPipe = (function() {
 			BigPipe.onPageletArrive(data, codeContainer);
 		},
 
+		onLastPageletArrived() {
+			BigPipe.onLastPageletArrived();
+		},
+
 		reset() {
 			BigPipe.pagelets.forEach(function(pagelet) {
 				pagelet.resources[Resource.TYPE_STYLESHEET].forEach(function(resource) {
@@ -357,6 +364,8 @@ BigPipe = (function() {
 				document.execCommand('Stop');
 			}
 
+			clearInterval(BigPipe.interval);
+
 			BigPipe.pagelets = [];
 			BigPipe.phase = 0;
 			BigPipe.wait = [];