animation loop doesn't initialize if there are streaming videos on the same page

[thisispete]

background

I'm using AnimationLoop from @luma.gl/engine v8.5.21 to create a model and run a render loop, elsewhere on the page I have webm videos embedded with a standard html <video> tag

the webm videos return 206 partial content as they stream down to the client, which seems to pin the document.readyState to interactive instead of complete

Actual Result

the animation loop doesn't reliably call the onInitialize, because the document.readyState doesn't always go to complete it stays on interactive because of the looming 206 partial content video streams

Expected Result

animation loop should always initialize

  loop = new AnimationLoop({
      gl,
      onInitialize(animationProps) {
        //this doesn't get called internally until document.readyState returns "complete"
        const { gl } = animationProps;
        model = new Model(gl, {
          fs: fragmentShader,
          vs: vertexShader,
          attributes: {
            position: new Buffer(gl, verticies)
          },
          uniforms,
          modules,
          vertexCount
        });
        return animationProps;
      },

      onRender({ gl, time }) {
        clear(gl, { color: [0, 0, 0, 0] });
         uniforms.time = time / 1000;
         updateUniforms({ time });
        model?.draw({ uniforms });
      },

      onFinalize({ gl }) {
        model?.delete();
        clear(gl, { color: [0, 0, 0, 0] });
        uniforms = null;
      }
    });
    loop.start();