title: How to check an image is loaded in a Skeleton functionality workflow in React
body: <p>I am implementing a Skeleton for a Card component as such:</p>
  <pre><code>{ loadingContext &amp; &lt;MySkeleton/&gt; : &lt;Card/&gt; }
  </code></pre>
  <p>However, for this to truly work properly, I need to test for the image within the Card component to finish loading through something like:</p>
  <pre><code>&lt;img onload={() =&gt; setLoadingContext(false)} .../&gt;
  </code></pre>
  <p>But, this Card component code doesn't get called until loading is set to false, and the code that sets loadingContext to false is in the Card component. A negative infinite loop if you like.</p>
  <p>The question is, then, how do I effectively check that the Card component's image has completely loaded in this situation?</p>
  <p>Cheers,
  Matt</p>