Why is react skeleton not rendering?

Question

I have a component Recommended 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:

Recommended.js

import { useState, useEffect } from "react";
import Skeleton from "react-loading-skeleton";
import { getVenues } from "../services/firebase";
import VenueCard from "./VenueCard";

const Reccomended = () => {
  const [venues, setVenues] = useState([]);

  useEffect(() => {
    async function getAllVenues() {
      const response = await getVenues();
      await setVenues(response);
    }
    getAllVenues();
  }, []);

  venues[0] ? console.log(true) : console.log(false)

  return (
    <div>
      {!venues[0] ? (
        <>
          <Skeleton />
        </>
      ) : (
        <>
          <p className="recommended">Recommended for Josh</p>
          <VenueCard venues={venues} />
        </>
      )}
    </div>
  );
};

export default Reccomended;

However, the skeleton is not rending during loading. The returning data is saved to the state variable venues, and I'm using the 'truthiness' as a conditional for the render. I tested this by logging the following:

venues[0] ? console.log(true) : console.log(false)

In the browser it initially logged false, followed quickly by true So given this, I don't understand why the skeleton isn't loading - any suggestions?
I've also passed parameters into <Skeleton/> which didn't change anything.

Answer 1

You must include the CSS styles, or you won't see anything. Just add

import "react-loading-skeleton/dist/skeleton.css";

with the rest of the imports.

This is documented in the package readme in the react-loading-skeleton basic Usage section