fix: fix lazy preloader removal error in react in vue

fixes #8149

Author: nolimits4web

src/react/swiper-slide.mjs

@@ -85,14 +85,28 @@ const SwiperSlide = forwardRef(
               data-swiper-zoom={typeof zoom === 'number' ? zoom : undefined}
             >
               {renderChildren()}
-              {lazy && !lazyLoaded && <div className="swiper-lazy-preloader" />}
+              {lazy && !lazyLoaded && (
+                <div
+                  className="swiper-lazy-preloader"
+                  ref={(node) => {
+                    if (node) node.lazyPreloaderManaged = true;
+                  }}
+                />
+              )}
             </div>
           </SwiperSlideContext.Provider>
         )}
         {!zoom && (
           <SwiperSlideContext.Provider value={slideData}>
             {renderChildren()}
-            {lazy && !lazyLoaded && <div className="swiper-lazy-preloader" />}
+            {lazy && !lazyLoaded && (
+              <div
+                className="swiper-lazy-preloader"
+                ref={(node) => {
+                  if (node) node.lazyPreloaderManaged = true;
+                }}
+              />
+            )}
           </SwiperSlideContext.Provider>
         )}
       </Tag>

src/shared/process-lazy-preloader.mjs

@@ -12,12 +12,13 @@ export const processLazyPreloader = (swiper, imageEl) => {
         requestAnimationFrame(() => {
           if (slideEl.shadowRoot) {
             lazyEl = slideEl.shadowRoot.querySelector(`.${swiper.params.lazyPreloaderClass}`);
-            if (lazyEl) lazyEl.remove();
+            if (lazyEl && !lazyEl.lazyPreloaderManaged) lazyEl.remove();
           }
         });
       }
     }
-    if (lazyEl) lazyEl.remove();
+    // Skip removal if managed by React/Vue component
+    if (lazyEl && !lazyEl.lazyPreloaderManaged) lazyEl.remove();
   }
 };
 

src/vue/swiper-slide.mjs

@@ -104,12 +104,26 @@ const SwiperSlide = {
               },
               [
                 slots.default && slots.default(slideData.value),
-                props.lazy && !lazyLoaded.value && h('div', { class: 'swiper-lazy-preloader' }),
+                props.lazy &&
+                  !lazyLoaded.value &&
+                  h('div', {
+                    class: 'swiper-lazy-preloader',
+                    onVnodeMounted: (vnode) => {
+                      if (vnode.el) vnode.el.lazyPreloaderManaged = true;
+                    },
+                  }),
               ],
             )
           : [
               slots.default && slots.default(slideData.value),
-              props.lazy && !lazyLoaded.value && h('div', { class: 'swiper-lazy-preloader' }),
+              props.lazy &&
+                !lazyLoaded.value &&
+                h('div', {
+                  class: 'swiper-lazy-preloader',
+                  onVnodeMounted: (vnode) => {
+                    if (vnode.el) vnode.el.lazyPreloaderManaged = true;
+                  },
+                }),
             ],
       );
     };