Image Blur Loader : Next.js

"use client";
import Image from "next/image";
import React, { useState } from "react";

const ImageBlurLoader = ({ src, figureClass, className, alt, ...props }) => {
  const [isImageLoaded, setIsImageLoaded] = useState(false);
  const handleImgLoad = () => {
    setIsImageLoaded(true);
  };

  return (
    <>
      <figure
        className={`${isImageLoaded ? "loaded" : ""} ${figureClass} relative`}
      >
        <div className="image_wrap">
          <Image
            src={src}
            width={32}
            height={32}
            quality={10}
            sizes="2vw"
            alt="img-test"
            className={`relative blur-2xl w-full h-full`}
            layout="fixed"
          />
        </div>
        <Image
          src={src}
          className={`${className} relative image_org`}
          onLoad={handleImgLoad}
          alt={alt}
          {...props}
        />
      </figure>
    </>
  );
};

export default ImageBlurLoader;

.image_wrap {
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    inset: 0;
    opacity: 1;
  }
  .image_wrap::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    background: #ffffff14;
    backdrop-filter: saturate(220%) blur(89px);
    z-index: 2;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) opacity,
      0.3s cubic-bezier(0.4, 0, 0.2, 1) visibility;
  }
  
  .loaded .image_wrap::before {
    opacity: 0;
    visibility: hidden;
  }

<ImageBlurLoader
  fill
  src={image.url}
  alt={image.alternativeText}
  className="object-cover"
  figureClass="relative overflow-hidden pb-[100%]"
 />