title: About React, Suspense, lazyLoad and preloading/rendering elements
body: <p>I am studying the <code>&lt;Suspense&gt;</code> and <code>React.lazy()</code> concepts, and I would like to better understand what happens in order to add some logic into an existing app.</p>
  
  <p>Let's start with the definitions:</p>
  
  <blockquote>
    <p>The React.lazy function lets you <strong>render</strong> a dynamic import as a regular component.</p>
  </blockquote>
  
  <p>(<strong>render</strong> highlighted by me)</p>
  
  <p>and</p>
  
  <blockquote>
    <p>If the module containing the OtherComponent is not yet <strong>loaded</strong> by the time MyComponent renders, we must show some fallback content while we’re waiting for it to load[...]</p>
  </blockquote>
  
  <p>(<strong>loaded</strong> highlighted by me)</p>
  
  <p>Now, the <code>Suspense</code> definition uses the term <em>load</em>, <code>lazy()</code> uses <em>render</em>.</p>
  
  <p>Let's add some code to the concept.</p>
  
  <pre><code>const ComponentOne = React.lazy(() =&gt; import("./ComponentOne"));
  const ComponentTwo = React.lazy(() =&gt; import("./ComponentTwo"));
  
  function BigBang() {
      return (
          &lt;Suspense fallback={&lt;SplashScreen/&gt;}&gt;
              &lt;section&gt;
                  &lt;ComponentOne/&gt;
                  &lt;ComponentTwo/&gt;
              &lt;/section&gt;
          &lt;/Suspense&gt;
      );
  }
  </code></pre>
  
  <p>Fine. The idea is that we are lazy-loading ComponentOne and ComponentTwo.
  While this process is not over, we will display SplashScreen.</p>
  
  <p><strong>THE QUESTION</strong>
  Now, let's assume that I have some import to some local images into ComponentOne and ComponentTwo (I will add the code only for one, let's assume there is something similar for the other one):</p>
  
  <pre><code>import avatar from "../../img/avatar.svg";
  import logo from "../../img/logo.svg";
  
  export default class ComponentOne extends React.Component {
      componentDidMount() {
          console.log("ComponentOne@componentDidMount");
      }
  
      render() {
          console.log("ComponentOne@render");
          return (
              &lt;div style={{display: 'none'}}&gt;
                  &lt;img src={avatar}/&gt;
                  &lt;img src={logo}/&gt;
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>Now it should be clear what I would like to ask:</p>
  
  <p>Does the SplashScreen disappear when ALL the imports are loaded? In other terms, when the SplashScreen disappear, can I assume that all the images in the ComponentOne and ComponentTwo are already loaded?</p>
  
  <p>This is the main question.</p>
  
  <p>A secondary question (that seems related to me, but if it's not I can open another thread) is: if the answer to the previous question is "NO", what is the best strategy to be sure that the images/fonts/"api response"/"other resources" are loaded before rendering, possibly maintaining the  logic because of an already existent flow? Direct <code>fetch()</code> to resources is not supported at the moment.</p>