I’m trying to use Skeleton component from shadcn as a placeholder while the google maps map loads, but seems that’s not working for me, maybe the map loads faster that the onLoad function?

I’m pretty much new into React and programming in general.

This is my MapSkeleton Component

import { Skeleton } from "./ui/skeleton";
import React from "react";

export default function MapSkeleton() {
  return (
    <div className="flex flex-col space-y-3">
      <Skeleton className="h-[200px] w-full rounded-xl" />
    </div>
  );
}

and this is my Footer

import React, { useState } from "react";
import MapSkeleton from "./MapSkeleton";

export default function Footer() {
  const [skeletonMap, setSkeletonMap] = useState(true);

  function handleMapLoad() {
    setSkeletonMap(false);
  }

  return (
    <footer id="footer" className="bg-muted pt-6 pb-4 font-merriweather">
      ...
            <div className="mt-4">
              {skeletonMap && <MapSkeleton />}
              <iframe
                src="https://maps.google.com/maps?width=100%25&height=200&hl=en&q=Maip%C3%BA%201599,%20B1623CFR%20Ingeniero%20Maschwitz,%20Provincia%20de%20Buenos%20Aires+(Herrajes%20Solido)&t=&z=14&ie=UTF8&iwloc=B&output=embed"
                width="100%"
                height="200"
                style={{ border: 0, display: skeletonMap ? "none" : "block" }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                frameBorder="0"
                allowFullScreen
                onLoad={handleMapLoad} // Handle the map load event
              />
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}