components/MDX/ImageWithSkeleton.tsx

"use client";

import { ComponentProps, FC, useState } from "react";
import Image from "next/image";
import styles from "@/styles/ImageWithSkeleton.module.css";

type ImageWithSkeletonProps = ComponentProps<typeof Image>;

const ImageWithSkeleton: FC<ImageWithSkeletonProps> = ({ ...imageProps }) => {
    const [isLoaded, setIsLoaded] = useState(false);
    const { onLoad, ...finalImageProps } = imageProps;

    return (
        <div className="relative">
            <Image
                onLoad={() => {
                    setIsLoaded(true);
                }}
                {...finalImageProps}
            />
            {!isLoaded && (
                <div
                    className={`absolute top-0 left-0 h-[100%] w-[100%] ${styles.skeleton}`}
                ></div>
            )}
        </div>
    );
};

export default ImageWithSkeleton;
1	rakinar2	575	"use client";
2
3			import { ComponentProps, FC, useState } from "react";
4			import Image from "next/image";
5			import styles from "@/styles/ImageWithSkeleton.module.css";
6
7			type ImageWithSkeletonProps = ComponentProps<typeof Image>;
8
9			const ImageWithSkeleton: FC<ImageWithSkeletonProps> = ({ ...imageProps }) => {
10			const [isLoaded, setIsLoaded] = useState(false);
11			const { onLoad, ...finalImageProps } = imageProps;
12
13			return (
14			<div className="relative">
15			<Image
16			onLoad={() => {
17			setIsLoaded(true);
18			}}
19			{...finalImageProps}
20			/>
21			{!isLoaded && (
22			<div
23			className={`absolute top-0 left-0 h-[100%] w-[100%] ${styles.skeleton}`}
24			></div>
25			)}
26			</div>
27			);
28			};
29
30			export default ImageWithSkeleton;