Swiper Element in Next.js: lazy attribute does not work with loop

[AbdelrahmanAhmed605]

When I add lazy={true} on swiper-slide, I keep getting a loading indicator on my images when I loop back (When I swipe from the last slide back to slide 1). Is it enough to just have the loading="lazy" on the image? or do I need it on swiper-slide as well?

This is my code:

<swiper-container
        init={false}
        ref={swiperElRef}
        loop={true}
        className="mySwiper"
        onTouchStart={(e) => e.preventDefault()}
      >
        {images.map((image, index) => (
          <swiper-slide className="w-full h-[400px]" key={index} lazy={true}>
            <img
              loading="lazy"
              src={image}
              alt="Image of Project"
            />
          </swiper-slide>
        ))}
      </swiper-container>
      ```