skeleton is not showing

Question

I'm trying to show Skeleton if the the component is loading, I installed react-loading-skeleton and it's working in others component, but it's in showing in this component, I want it to show until the component finish loading.

ShopPage.jsx Here where I'm fetching all the coupons and shops, and where I configured isLoading state.

import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
import Coupon from "../../components/coupon/Coupon";

export default function ShopPage() {
  const [disable, setDisable] = useState(false);
  const [shop, setShop] = useState("");
  const shopName = useParams().shopName;
  const [shopCoupons, setCoupons] = useState([]);
  const { search } = useLocation();
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchShop = async () => {
      const res = await axios.get(`/shops/${shopName}`);
      setShop(res.data);
      console.log(res.data);
      setIsLoading(false);
    };
    const fetchShopCoupons = async () => {
      const response = await axios.get(`/coupons/${shopName}`);
      setCoupons(response.data);
      console.log("Shop Coupons are:", response.data);
      setIsLoading(false);
    };
    fetchShop();
    fetchShopCoupons();
  }, [shopName]);

  return (
    <>
        <div className="ShopPage">
          <div className="ShopPageContainer">
          
            <div className="ShopPageInfoContainer">
              <div className="ShopPageShopNameButton">
                <div>
                  <h5 className="ShopPageShopName">
                      {/* {capitalizeFirstLetter(`${shop.shopName} `) || <Skeleton />} */}
                  </h5>
                </div>
                               

            </div>

        </div>

        <Box className="ShopPageCouponsContainer">
        {shopCoupons.map(c => (
            <Coupon isLoading={isLoading} coupon={c} key={c}/>
        ))}
        </Box>
        </div>
        </div>  
    </>
  )
}

Coupon.jsx Here the title and images of the coupons and the Skeleton should show here until the title and other component finish loading

import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'

export default function Coupon({ coupon, isLoading }) {
  return (
    <div className="coupon-container">
    <div className="coupon">
          <div className="co-img">
            {coupon.photo && 
            <img className="couponLogo"
            src={coupon.shopPic} alt="" />}
          </div>
        <div className="content">
          <a href={`/shops/${coupon.shopName}`} target="_self">
            <h2 className="couponShopName">
{isLoading ? (<Skeleton />):(coupon.shopName)}
</h2>
          </a>
          <h1>{isLoading ? (<Skeleton />) : (coupon.title)}</h1>
        </div>
        <div className="couponDesc">
          {coupon.desc}
        </div>


    </div>
    </div>
  );
}

The problem is that the Skeleton is not showing at all, I don't know if I passed isLoading state to Coupon.jsx the correct way or not, some help would be appreciated.

`shopCoupons` is an empty array at the beginning so there is nothing to show — Konrad, Dec 01 '22 at 20:22

score 0 · Answer 1 · answered Dec 01 '22 at 20:42

Looks like you are using the same isLoading state for 2 different fetch calls/promises. So if fetchShop() runs first and gets resolved first, isLoading is already set to false when fetchCoupons() runs. If you had 2 different booleans for each promise, like isShopLoading and isCouponsLoading, it might fix the issue.

skeleton is not showing

1 Answers1