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();

[thisispete]

internal source is found in animation-loop - page load promise
(or classic-animation-loop in the v9 alpha code)

for testing I've tried the page with and without video embeds on the same page and it works reliably only without the videos present on the same page.

[ibgreen]

Maybe we should could add a pageLoaded: Promise property so that applications can override with their own handling?

loop = new AnimationLoop({gl, pageLoaded: Promise.resolve(), ...});