title: Why is react skeleton not rendering?
body: <p>I have a component <code>Recommended</code> that makes a service call to firebase and renders the returned data. During the loading delay at the database call, I want to render a react skeleton, as follows:</p>
  <p><em><strong>Recommended.js</strong></em></p>
  <pre><code>import { useState, useEffect } from &quot;react&quot;;
  import Skeleton from &quot;react-loading-skeleton&quot;;
  import { getVenues } from &quot;../services/firebase&quot;;
  import VenueCard from &quot;./VenueCard&quot;;
  
  const Reccomended = () =&gt; {
    const [venues, setVenues] = useState([]);
  
    useEffect(() =&gt; {
      async function getAllVenues() {
        const response = await getVenues();
        await setVenues(response);
      }
      getAllVenues();
    }, []);
  
    venues[0] ? console.log(true) : console.log(false)
  
    return (
      &lt;div&gt;
        {!venues[0] ? (
          &lt;&gt;
            &lt;Skeleton /&gt;
          &lt;/&gt;
        ) : (
          &lt;&gt;
            &lt;p className=&quot;recommended&quot;&gt;Recommended for Josh&lt;/p&gt;
            &lt;VenueCard venues={venues} /&gt;
          &lt;/&gt;
        )}
      &lt;/div&gt;
    );
  };
  
  export default Reccomended;
  </code></pre>
  <p>However, the skeleton is not rending during loading. The returning data is saved to the state variable <code>venues</code>, and I'm using the 'truthiness' as a conditional for the render. I tested this by logging the following: <br></p>
  <blockquote>
  <p><code>  venues[0] ? console.log(true) : console.log(false)</code></p>
  </blockquote>
  <p>In the browser it initially logged <code>false</code>, followed quickly by <code>true</code> 
  So given this, I don't understand why the skeleton isn't loading - any suggestions? <br>
  I've also passed parameters into <code>&lt;Skeleton/&gt;</code> which didn't change anything.</p>