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	"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;