Hide module until everything is loaded

I’m using an interactive module within an article that takes a while to download completely.

I am hoping to have a “Loading…” div in place of the module that sticks until the whole module/article page is fully rendered.

Here’s my CSS:

.loading {
  font-family: "National Book",system-ui;
  color: #26a0a5;
  font-size: 16px;
max-width: 300px;
margin:auto;
}

.loading-wrapper {
background: #fff;
position: absolute;
top: 0;
left:0;
width: 100%;
height:100%;
z-index: 22;
}

.loading-bar {
  height: 2rem;
  background: #26a0a5;
  width: 100%;
  display: block;
  animation-name: loading;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes loading {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.relative {
position: relative;
}

Here’s my Javascript:

  let canvasInterval = setInterval(()=>{
    if(window.MentalCanvas){
      clearInterval(canvasInterval)
      GScene = window.MentalCanvas.default.run(
        document.getElementById('render-container'),
        { path: 'https://files.sfchronicle.com/static-assets/mental-canvas/MAQUILADORA',
          fullscreen: false,
          controlsMode: 'scrolly' },
        function(error) {
          console.log(error)
         }
      );
      GScene.addEventListener('startRender', function() {
        document.querySelector('.loading-wrapper').classList.add('hidden');
      })
    }

    //declare box, element, pos
    function writeLayout(percent){
      if(GScene){
        GScene.setAnimationScrubT(percent);
        let captions = document.getElementById('captions');
        // Convert from "% of animation" (dummy.t) to "bookmark index"
        //   e.g., 0.45
        // the integer part (0) means "bookmark #1", the fractional part (0.45)
        // means "45% of the way to bookmark #2".
        //
        // This is important when the bookmark animation has different durations for
        // each bookmark, or linger times, etc.
        const bookmarkIndexFrac = GScene.cameraAnimator.GetSplinePos();
        captions.scrollTop = bookmarkIndexFrac*captions.clientHeight;
      }
    }


    window.addEventListener('scroll', ()=> {
      let scrollY = document.documentElement.scrollTop;
      let scrollRef = document.getElementById('scroll-ref');
      let offsetTop = scrollRef.offsetTop;
      let offsetHeight = scrollRef.offsetHeight-window.innerHeight; //*0.8
      let percent = (scrollY-offsetTop)/offsetHeight;

      if(scrollY>offsetTop && scrollY<offsetTop+offsetHeight){
        requestAnimationFrame(() => {
          writeLayout(percent)
        });
      }
    });

  }, 500)

And here’s the syntax I’m using right before the code for the module:

<div class="relative">
<div class="loading-wrapper">
<div class="loading">
        Loading... <span class="loading-bar"></span>
      </div>
</div>

<div id="canvas-scroller-30" class="mcscroller-module--render-container--32l70 mcscroller-module--visually-hidden--3v228"></div>

Right now, the “Loading…” shows up as intended, but it does not stay for the duration of the entire module load time.

Any help on adjusting this part of the code so it functions how it should?

GScene.addEventListener('startRender', function() {
        document.querySelector('.loading-wrapper').classList.add('hidden');
      })
    }