Reactjs - Показать загружаемое изображение сразу после нажатия на ссылку, пока ребенок не будет полностью отображен

Question

Я выполняю сложный холст с помощью fabricjs. Это займет несколько секунд, около 3 + -. Есть ли способ сделать эту страницу немедленно, не дожидаясь рендеринга, и показать загружаемое изображение, пока холст не появится сразу?

моего родителя компонент -

class GraphPage extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      loaded: false, 
      print: null 
     } 
    } 

    render(){ 
     console.log('render'); 
     const graphList = graphStore.getGraphValue(); 
     var {data} = this.props; 
     return(
      <div> 
       <div className="inputs"> 
        <Inputs modal={false} unit='%' list={graphList.rotation} descTitle={data.graph.machine}/> 
        <Inputs modal={false} unit='mm' list={graphList.machine} descTitle={data.graph.rotation}/> 
       </div> 
       <div className="graph"> 
        <Print /> 
       </div> 

      </div> 
     ) 
    } 
} 

Print мой холст компонент.

Answer 1

Если print является компонентом ткани JS я бы передать onLoaded обратный вызов к нему, а затем, когда объект fabric.Image по окончанию загрузки вы можете вызвать эту функцию и установить loaded состояния для этого компонента. Тогда эта функция может отображать что-то другое на основе этого состояния.