NextJS Image component with a skeleton placeholder

SkeletonImage.tsx

import Image, { ImageProps } from "next/image";
import { ReactNode, useState } from "react";

interface ISkeletonImageProps extends ImageProps {
  skeleton: ReactNode;
}

const SkeletonImage = ({ skeleton, ...props }: ISkeletonImageProps) => {
  const [showSkeleton, setShowSkeleton] = useState<boolean>(true);
  const { alt, width, height, src, className } = props;

  return (
    <div>
      <Image
        width={width}
        height={height}
        className={`${className} ${
          showSkeleton ? "opacity-0 absolute" : "opacity-1 relative"
        }`}
        src={src}
        alt={alt}
        placeholder="empty"
        onLoadingComplete={() => {
          setShowSkeleton(false);
        }}
      />

      {showSkeleton ? <div className="animate-pulse"> {skeleton} </div> : null}
    </div>
  );
};

export default SkeletonImage;