diff --git a/src/libs/extensions/swiper/index.ts b/src/libs/extensions/swiper/index.ts index e0c5972..79c8652 100644 --- a/src/libs/extensions/swiper/index.ts +++ b/src/libs/extensions/swiper/index.ts @@ -3,5 +3,6 @@ export { isSwiperLoading, updateSwiperInstance, setSwiperLoadingStatus, - refreshSwiper + refreshSwiper, + getInstance } from "./swiper.extension" diff --git a/src/libs/extensions/swiper/swiper.extension.ts b/src/libs/extensions/swiper/swiper.extension.ts index eb3e880..d2423a5 100644 --- a/src/libs/extensions/swiper/swiper.extension.ts +++ b/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({ diff --git a/src/widget-loader.ts b/src/widget-loader.ts index 6e3a7c1..e8283f3 100644 --- a/src/widget-loader.ts +++ b/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)