imgSrc sometimes not showing

[renaiku]

Hello !

I'm testing the following code on two devices at the same time (mobile and desktop). Both using firefox. Did not try with chrome.

imgSrc is either a jpeg in the same folder or a base64 string.

I got a server that shows the following component on all clients at the same time for ~30seconds. After that delay, i'm not displaying it anymore. so the react event componentWillUnmount() is fired and log me in the console the canvas. I can see that the image property of the component is always filled (either if i used the local jpeg or the base64 string).

Sometimes, randomly, really randomly, the canvas hasn't the imgSrc displayed. It's a white background. Sometimes on both devices, sometimes on 1 of them, sometimes everything is fine.

import img from './testlocal.jpeg';

class Draw extends Component {

  constructor(props) {
    super(props);

    this.state = {
      loadTimeOffset: 5,
      lazyRadius: 0,
      brushRadius: 12,
      brushColor: "rgba(255,255,255,1)",
      catenaryColor: "#0a0302",
      gridColor: "rgba(150,150,150,0.17)",
      hideGrid: false,
      canvasWidth: window.innerWidth,
      canvasHeight: window.innerWidth,
      disabled: false,
      //imgSrc: this.props.img,
      imgSrc: img,
      saveData: null,
      immediateLoading: false
    };

    this.handleChangeColorComplete = this.handleChangeColorComplete.bind(this);
  }

  handleChangeColorComplete(color) {
    this.setState({
      brushColor: color.hex
    });
  }

  componentWillUnmount() {
    console.log("final canvas:", this.saveableCanvas)
  }

  componentDidMount() {
    console.log('I am mounted!');
    console.log(this.saveableCanvas);
  }

  render() {
    console.log("rendering")
    return (
      <div className="GameModeDraw" >

        {/* <div>{this.props.img}</div> */}

        {/* <img src={this.props.img} alt="test"/>
        <img src={this.state.imgSrc} alt="test2"/> */}

        <div className="container">
          <CanvasDraw
            className="canvas-container"
            ref={canvasDraw => (this.saveableCanvas = canvasDraw)}
            loadTimeOffset={this.state.loadTimeOffset}
            lazyRadius={this.state.lazyRadius}
            brushRadius={this.state.brushRadius}
            brushColor={this.state.brushColor}
            catenaryColor={this.state.catenaryColor}
            gridColor={this.state.gridColor}
            hideGrid={this.state.hideGrid}
            canvasWidth={this.state.canvasWidth}
            canvasHeight={this.state.canvasHeight}
            disabled={this.state.disabled}
            imgSrc={this.state.imgSrc}
            saveData={this.state.saveData}
            immediateLoading={this.state.immediateLoading}
          />

          <div className="draw-tools">
            <SliderPicker 
              color={this.state.brushColor}
              onChangeComplete={this.handleChangeColorComplete}
            />

            <button onClick={() => {this.saveableCanvas.undo()}}>Undo</button>
          </div>

        </div>

      </div>
    );
  }
}

export default Draw ;

Did I made a mistake somewhere ?

Left and Right are two different clients Both seems to log the same component when componentWillUnmount() is fired