Deck.gl: Multiple DeckGL Components Don't All Initialize

[ilan-gold]

Description

Hello, we have a use case where we have multiple DeckGL react components within the same page. This appears to have worked fine as of 7.1.4. However, it no longer appears to work - the layers are stuck in an "Awaiting State" state (with state null like #2131). It appears that after the "first" DeckGL component, the other ones do not initialize their gl context (or a similar step is missing) which I think is causing the hanging state.

Repro Steps

Create an application with two DeckGL components and add an onWebGLInitialized callback that logs out the context. There is only one.

import React, {PureComponent} from 'react';
import DeckGL from '@deck.gl/react';
import { OrthographicView } from 'deck.gl';

export default class App extends PureComponent {

  _onWebGLInitialized(gl) {
    console.log(gl)
  }

  render() {
    return (
      <div>
      <DeckGL onWebGLInitialized={this._onWebGLInitialized} controller={true} views={new OrthographicView({id:'ortho1', controller:true, height:1024, width: 1024})}>
      </DeckGL>
      <DeckGL onWebGLInitialized={this._onWebGLInitialized} controller={true} views={new OrthographicView({id:'ortho2', controller:true, height:1024, width: 1024})}>
      </DeckGL>
      </div>
    );
  }
}

Environment (please complete the following information):

• Framework Version: deck.gl 8.0.9
• Browser Version: Firefox 72.0.1
• OS: [e.g. Mac OS X 10.4] Mac OS X 10.14.5

Logs

Note there is only 1 log statement - in the last build of our application there are three for 3 separate components

deck: deck.gl 8.0.9 - set deck.log.level=1 (or higher) to trace attribute updates init.js:45
WebGL2RenderingContext { _version: 2, luma: {…}, getQueryObject: getQueryObject(), readBuffer: readBuffer(), getVertexAttrib: getVertexAttrib(), getProgramParameter: getProgramParameter(), getInternalformatParameter: getInternalformatParameter(), getTexParameter: getTexParameter(), getParameter: get(), hint: set(), … }

[Pessimistress]

@tsherif It seems that AnimationLoop fails to initiate more than one instances, due to
https://github.com/uber/luma.gl/blob/1310e16211a7346ad969efb8b69d3e27a6d53899/modules/engine/src/lib/animation-loop.js#L298-L300

Instead of window.onload it needs to use window.addEventListener so that multiple listeners can be attached.

[Pessimistress]

Fixed in 8.0.10.