Block: Fix issues with stories not appearing in lightbox (#13493)

packages/stories-lightbox/src/web-stories-lightbox.js

@@ -58,7 +58,9 @@ class Lightbox {
     this.player.addEventListener('navigation', (event) => {
       const storyObject = this.stories[event.detail.index];
       if (storyObject && storyObject.href !== document.location.href) {
-        history.pushState({}, '', storyObject.href);
+        this.storyContentReady(storyObject, () => {
+          history.pushState({}, '', storyObject.href);
+        });
       }
     });
 
@@ -127,13 +129,34 @@ class Lightbox {
         this.player.show(storyObject.href);
         this.player.play();
 
-        history.pushState({}, '', storyObject.href);
+        this.storyContentReady(storyObject, () => {
+          history.pushState({}, '', storyObject.href);
+        });
 
         this.lightboxElement.classList.toggle('show');
         document.body.classList.toggle('web-stories-lightbox-open');
       });
     });
   }
+
+  /**
+   * Executes supplied `callback` after the story is fully loaded into player.
+   *
+   * @param {*} storyObject Story object to check for. Reference: https://github.com/ampproject/amphtml/blob/4ce3cd79520dbeaf5ed5364cbff58d3d71dee40e/src/amp-story-player/amp-story-player-impl.js#L115-L129.
+   * @param {*} callback Callback to execute when story is loaded fully.
+   * @param {number} maxRetries Number of tries to check for.
+   */
+  storyContentReady(storyObject, callback, maxRetries = 5) {
+    const stateIntervalObj = setInterval(() => {
+      if (storyObject.storyContentLoaded === true) {
+        window.clearInterval(stateIntervalObj);
+        callback();
+      }
+      if (!--maxRetries) {
+        window.clearInterval(stateIntervalObj);
+      }
+    }, 250);
+  }
 }
 
 export default function initializeWebStoryLightbox() {