Merge pull request #97 from Stackla/add-get-instance-to-exposed-libs

feat: add getInstance function to swiper extension exports

Author: olivernosto

src/libs/extensions/swiper/index.ts

@@ -3,5 +3,6 @@ export {
   isSwiperLoading,
   updateSwiperInstance,
   setSwiperLoadingStatus,
-  refreshSwiper
+  refreshSwiper,
+  getInstance
 } from "./swiper.extension"

src/libs/extensions/swiper/swiper.extension.ts

@@ -26,6 +26,21 @@ function addTilesUpdatedListener(id: string, getSlides?: (tiles: Record<string,
 
     swiper?.update()
   })
+
+  if (!swiper) {
+    console.warn("Swiper instance not found")
+    return
+  }
+
+  const observer = new MutationObserver(() => {
+    swiper.update()
+    sdk.querySelector(".tile-loading:not(.hidden)")?.classList.add("hidden")
+  })
+
+  observer.observe(sdk.querySelector(".ugc-tiles")!, {
+    childList: true,
+    subtree: true
+  })
 }
 
 export function initializeSwiper({

src/widget-loader.ts

@@ -126,10 +126,15 @@ export interface EnforcedWidgetSettings<C> extends Required<MyWidgetSettings<C>>
 }
 
 function loadMasonryCallbacks<C>(settings: EnforcedWidgetSettings<C>) {
-  settings.callbacks.onTilesUpdated.push(() => {
+  const tilesUpdatedObserver = new MutationObserver(() => {
     renderMasonryLayout()
   })
 
+  tilesUpdatedObserver.observe(sdk.querySelector(".ugc-tiles")!, {
+    childList: true,
+    subtree: true
+  })
+
   settings.callbacks.onTileBgImgRenderComplete.push(() => {
     handleAllTileImageRendered()
     setTimeout(handleAllTileImageRendered, 1000)
@@ -143,7 +148,7 @@ function loadMasonryCallbacks<C>(settings: EnforcedWidgetSettings<C>) {
 
   const grid = sdk.querySelector(".grid")
   const observer = new ResizeObserver(() => {
-    renderMasonryLayout(false, true)
+    renderMasonryLayout()
   })
 
   observer.observe(grid)