@wyxos/vibe 1.6.27 → 1.6.29

package/src/useMasonryLayout.ts

@@ -1,164 +1,164 @@
-import { ref, nextTick, type Ref, type ComputedRef } from 'vue'
-import calculateLayout from './calculateLayout'
-import { getColumnCount, calculateContainerHeight } from './masonryUtils'
-
-export interface UseMasonryLayoutOptions {
-  masonry: Ref<any[]>
-  useSwipeMode: ComputedRef<boolean>
-  container: Ref<HTMLElement | null>
-  columns: Ref<number>
-  containerWidth: Ref<number>
-  masonryContentHeight: Ref<number>
-  layout: ComputedRef<any>
-  fixedDimensions: Ref<{ width?: number; height?: number } | null>
-  checkItemDimensions: (items: any[], context: string) => void
-}
-
-export function useMasonryLayout(options: UseMasonryLayoutOptions) {
-  const {
-    masonry,
-    useSwipeMode,
-    container,
-    columns,
-    containerWidth,
-    masonryContentHeight,
-    layout,
-    fixedDimensions,
-    checkItemDimensions
-  } = options
-
-  // Cache previous layout state for incremental updates
-  let previousLayoutItems: any[] = []
-
-  function calculateHeight(content: any[]) {
-    const newHeight = calculateContainerHeight(content as any)
-    let floor = 0
-    if (container.value) {
-      const { scrollTop, clientHeight } = container.value
-      floor = scrollTop + clientHeight + 100
-    }
-    masonryContentHeight.value = Math.max(newHeight, floor)
-  }
-
-  function refreshLayout(items: any[]) {
-    if (useSwipeMode.value) {
-      // In swipe mode, no layout calculation needed - items are stacked vertically
-      masonry.value = items as any
-      return
-    }
-
-    // Always update masonry value, even if container isn't ready
-    // This ensures items are added in tests and when container isn't available yet
-    masonry.value = items as any
-
-    if (!container.value) return
-    // Developer diagnostics: warn when dimensions are invalid
-    checkItemDimensions(items as any[], 'refreshLayout')
-
-    // Optimization: For large arrays, check if we can do incremental update
-    // Only works if items were removed from the end (common case)
-    const canUseIncremental = items.length > 1000 &&
-      previousLayoutItems.length > items.length &&
-      previousLayoutItems.length - items.length < 100 // Only small removals
-
-    if (canUseIncremental) {
-      // Check if items were removed from the end (most common case)
-      let removedFromEnd = true
-      for (let i = 0; i < items.length; i++) {
-        if (items[i]?.id !== previousLayoutItems[i]?.id) {
-          removedFromEnd = false
-          break
-        }
-      }
-
-      if (removedFromEnd) {
-        // Items removed from end - we can reuse previous positions for remaining items
-        // Just update indices and recalculate height
-        const itemsWithIndex = items.map((item, index) => ({
-          ...previousLayoutItems[index],
-          originalIndex: index
-        }))
-
-        // Recalculate height only
-        calculateHeight(itemsWithIndex as any)
-        masonry.value = itemsWithIndex
-        previousLayoutItems = itemsWithIndex
-        return
-      }
-    }
-
-    // Full recalculation (fallback for all other cases)
-    // Update original index to reflect current position in array
-    // This ensures indices are correct after items are removed
-    const itemsWithIndex = items.map((item, index) => ({
-      ...item,
-      originalIndex: index
-    }))
-
-    // When fixed dimensions are set, ensure container uses the fixed width for layout
-    // This prevents gaps when the container's actual width differs from the fixed width
-    const containerEl = container.value as HTMLElement
-    if (fixedDimensions.value && fixedDimensions.value.width !== undefined) {
-      // Temporarily set width to match fixed dimensions for accurate layout calculation
-      const originalWidth = containerEl.style.width
-      const originalBoxSizing = containerEl.style.boxSizing
-      containerEl.style.boxSizing = 'border-box'
-      containerEl.style.width = `${fixedDimensions.value.width}px`
-      // Force reflow
-      containerEl.offsetWidth
-
-      const content = calculateLayout(itemsWithIndex as any, containerEl, columns.value, layout.value as any)
-
-      // Restore original width
-      containerEl.style.width = originalWidth
-      containerEl.style.boxSizing = originalBoxSizing
-
-      calculateHeight(content as any)
-      masonry.value = content
-      // Cache for next incremental update
-      previousLayoutItems = content
-    } else {
-      const content = calculateLayout(itemsWithIndex as any, containerEl, columns.value, layout.value as any)
-      calculateHeight(content as any)
-      masonry.value = content
-      // Cache for next incremental update
-      previousLayoutItems = content
-    }
-  }
-
-  function setFixedDimensions(
-    dimensions: { width?: number; height?: number } | null,
-    updateScrollProgress?: () => void
-  ) {
-    fixedDimensions.value = dimensions
-    if (dimensions) {
-      if (dimensions.width !== undefined) containerWidth.value = dimensions.width
-      // Force layout refresh when dimensions change
-      if (!useSwipeMode.value && container.value && masonry.value.length > 0) {
-        // Use nextTick to ensure DOM has updated
-        nextTick(() => {
-          columns.value = getColumnCount(layout.value as any, containerWidth.value)
-          refreshLayout(masonry.value as any)
-          if (updateScrollProgress) {
-            updateScrollProgress()
-          }
-        })
-      }
-    }
-    // When clearing fixed dimensions, restore from wrapper
-    // Note: wrapper is not available in this composable, so this needs to be handled by caller
-  }
-
-  function onResize() {
-    columns.value = getColumnCount(layout.value as any, containerWidth.value)
-    refreshLayout(masonry.value as any)
-  }
-
-  return {
-    refreshLayout,
-    setFixedDimensions,
-    onResize,
-    calculateHeight
-  }
-}
-
+import { ref, nextTick, type Ref, type ComputedRef } from 'vue'
+import calculateLayout from './calculateLayout'
+import { getColumnCount, calculateContainerHeight } from './masonryUtils'
+
+export interface UseMasonryLayoutOptions {
+  masonry: Ref<any[]>
+  useSwipeMode: ComputedRef<boolean>
+  container: Ref<HTMLElement | null>
+  columns: Ref<number>
+  containerWidth: Ref<number>
+  masonryContentHeight: Ref<number>
+  layout: ComputedRef<any>
+  fixedDimensions: Ref<{ width?: number; height?: number } | null>
+  checkItemDimensions: (items: any[], context: string) => void
+}
+
+export function useMasonryLayout(options: UseMasonryLayoutOptions) {
+  const {
+    masonry,
+    useSwipeMode,
+    container,
+    columns,
+    containerWidth,
+    masonryContentHeight,
+    layout,
+    fixedDimensions,
+    checkItemDimensions
+  } = options
+
+  // Cache previous layout state for incremental updates
+  let previousLayoutItems: any[] = []
+
+  function calculateHeight(content: any[]) {
+    const newHeight = calculateContainerHeight(content as any)
+    let floor = 0
+    if (container.value) {
+      const { scrollTop, clientHeight } = container.value
+      floor = scrollTop + clientHeight + 100
+    }
+    masonryContentHeight.value = Math.max(newHeight, floor)
+  }
+
+  function refreshLayout(items: any[]) {
+    if (useSwipeMode.value) {
+      // In swipe mode, no layout calculation needed - items are stacked vertically
+      masonry.value = items as any
+      return
+    }
+
+    // Always update masonry value, even if container isn't ready
+    // This ensures items are added in tests and when container isn't available yet
+    masonry.value = items as any
+
+    if (!container.value) return
+    // Developer diagnostics: warn when dimensions are invalid
+    checkItemDimensions(items as any[], 'refreshLayout')
+
+    // Optimization: For large arrays, check if we can do incremental update
+    // Only works if items were removed from the end (common case)
+    const canUseIncremental = items.length > 1000 &&
+      previousLayoutItems.length > items.length &&
+      previousLayoutItems.length - items.length < 100 // Only small removals
+
+    if (canUseIncremental) {
+      // Check if items were removed from the end (most common case)
+      let removedFromEnd = true
+      for (let i = 0; i < items.length; i++) {
+        if (items[i]?.id !== previousLayoutItems[i]?.id) {
+          removedFromEnd = false
+          break
+        }
+      }
+
+      if (removedFromEnd) {
+        // Items removed from end - we can reuse previous positions for remaining items
+        // Just update indices and recalculate height
+        const itemsWithIndex = items.map((item, index) => ({
+          ...previousLayoutItems[index],
+          originalIndex: index
+        }))
+
+        // Recalculate height only
+        calculateHeight(itemsWithIndex as any)
+        masonry.value = itemsWithIndex
+        previousLayoutItems = itemsWithIndex
+        return
+      }
+    }
+
+    // Full recalculation (fallback for all other cases)
+    // Update original index to reflect current position in array
+    // This ensures indices are correct after items are removed
+    const itemsWithIndex = items.map((item, index) => ({
+      ...item,
+      originalIndex: index
+    }))
+
+    // When fixed dimensions are set, ensure container uses the fixed width for layout
+    // This prevents gaps when the container's actual width differs from the fixed width
+    const containerEl = container.value as HTMLElement
+    if (fixedDimensions.value && fixedDimensions.value.width !== undefined) {
+      // Temporarily set width to match fixed dimensions for accurate layout calculation
+      const originalWidth = containerEl.style.width
+      const originalBoxSizing = containerEl.style.boxSizing
+      containerEl.style.boxSizing = 'border-box'
+      containerEl.style.width = `${fixedDimensions.value.width}px`
+      // Force reflow
+      containerEl.offsetWidth
+
+      const content = calculateLayout(itemsWithIndex as any, containerEl, columns.value, layout.value as any)
+
+      // Restore original width
+      containerEl.style.width = originalWidth
+      containerEl.style.boxSizing = originalBoxSizing
+
+      calculateHeight(content as any)
+      masonry.value = content
+      // Cache for next incremental update
+      previousLayoutItems = content
+    } else {
+      const content = calculateLayout(itemsWithIndex as any, containerEl, columns.value, layout.value as any)
+      calculateHeight(content as any)
+      masonry.value = content
+      // Cache for next incremental update
+      previousLayoutItems = content
+    }
+  }
+
+  function setFixedDimensions(
+    dimensions: { width?: number; height?: number } | null,
+    updateScrollProgress?: () => void
+  ) {
+    fixedDimensions.value = dimensions
+    if (dimensions) {
+      if (dimensions.width !== undefined) containerWidth.value = dimensions.width
+      // Force layout refresh when dimensions change
+      if (!useSwipeMode.value && container.value && masonry.value.length > 0) {
+        // Use nextTick to ensure DOM has updated
+        nextTick(() => {
+          columns.value = getColumnCount(layout.value as any, containerWidth.value)
+          refreshLayout(masonry.value as any)
+          if (updateScrollProgress) {
+            updateScrollProgress()
+          }
+        })
+      }
+    }
+    // When clearing fixed dimensions, restore from wrapper
+    // Note: wrapper is not available in this composable, so this needs to be handled by caller
+  }
+
+  function onResize() {
+    columns.value = getColumnCount(layout.value as any, containerWidth.value)
+    refreshLayout(masonry.value as any)
+  }
+
+  return {
+    refreshLayout,
+    setFixedDimensions,
+    onResize,
+    calculateHeight
+  }
+}
+

package/src/useMasonryPagination.ts

@@ -1,4 +1,4 @@
-import { ref, type Ref } from 'vue'
+import { ref, nextTick, type Ref } from 'vue'
 import { normalizeError } from './utils/errorHandler'
 
 export interface UseMasonryPaginationOptions {
@@ -14,7 +14,7 @@ export interface UseMasonryPaginationOptions {
   retryMaxAttempts: number
   retryInitialDelayMs: number
   retryBackoffStepMs: number
-  mode: string
+  mode: string | Ref<string>
   backfillDelayMs: number
   backfillMaxCalls: number
   pageSize: number
@@ -23,10 +23,10 @@ export interface UseMasonryPaginationOptions {
     (event: 'retry:start', payload: { attempt: number; max: number; totalMs: number }): void
     (event: 'retry:tick', payload: { attempt: number; remainingMs: number; totalMs: number }): void
     (event: 'retry:stop', payload: { attempt: number; success: boolean }): void
-    (event: 'backfill:start', payload: { target: number; fetched: number; calls: number }): void
-    (event: 'backfill:tick', payload: { fetched: number; target: number; calls: number; remainingMs: number; totalMs: number }): void
-    (event: 'backfill:stop', payload: { fetched: number; calls: number; cancelled?: boolean }): void
-    (event: 'loading:stop', payload: { fetched: number }): void
+    (event: 'backfill:start', payload: { target: number; fetched: number; calls: number; currentPage: any; nextPage: any }): void
+    (event: 'backfill:tick', payload: { fetched: number; target: number; calls: number; remainingMs: number; totalMs: number; currentPage: any; nextPage: any }): void
+    (event: 'backfill:stop', payload: { fetched: number; calls: number; cancelled?: boolean; currentPage: any; nextPage: any }): void
+    (event: 'loading:stop', payload: { fetched: number; currentPage: any; nextPage: any }): void
   }
 }
 
@@ -51,6 +51,9 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
     emits
   } = options
 
+  // Make mode reactive so it updates when the prop changes
+  const modeRef = typeof mode === 'string' ? ref(mode) : (mode as Ref<string>)
+
   const cancelRequested = ref(false)
   let backfillActive = false
 
@@ -135,9 +138,18 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
 
   async function getContent(page: number) {
     try {
-      const response = await fetchWithRetry(() => getPage(page, context?.value))
-      refreshLayout([...masonry.value, ...response.items])
-      return response
+      const pageData = await fetchWithRetry(() => getPage(page, context?.value))
+      // Add items to masonry array first (allows Vue transition-group to detect new items)
+      const newItems = [...masonry.value, ...pageData.items]
+      masonry.value = newItems
+      await nextTick()
+
+      // Commit DOM updates without forcing sync reflow
+      await nextTick()
+      // Start FLIP on next tick (same pattern as restore/restoreMany)
+      await nextTick()
+      refreshLayout(newItems)
+      return pageData
     } catch (error) {
       // Error is handled by callers (loadPage, loadNext, etc.) which set loadError
       throw error
@@ -145,7 +157,7 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
   }
 
   async function maybeBackfillToTarget(baselineCount: number, force = false) {
-    if (!force && mode !== 'backfill') return
+    if (!force && modeRef.value !== 'backfill') return
     if (backfillActive) return
     if (cancelRequested.value) return
     // Don't backfill if we've reached the end
@@ -170,7 +182,15 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
     }
     try {
       let calls = 0
-      emits('backfill:start', { target: targetCount, fetched: masonry.value.length, calls })
+      const initialCurrentPage = currentPage.value
+      const initialNextPage = paginationHistory.value[paginationHistory.value.length - 1]
+      emits('backfill:start', {
+        target: targetCount,
+        fetched: masonry.value.length,
+        calls,
+        currentPage: initialCurrentPage,
+        nextPage: initialNextPage
+      })
 
       while (
         masonry.value.length < targetCount &&
@@ -180,20 +200,24 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
         !hasReachedEnd.value &&
         backfillActive
       ) {
+        const tickCurrentPage = currentPage.value
+        const tickNextPage = paginationHistory.value[paginationHistory.value.length - 1]
         await waitWithProgress(backfillDelayMs, (remaining, total) => {
           emits('backfill:tick', {
             fetched: masonry.value.length,
             target: targetCount,
             calls,
             remainingMs: remaining,
-            totalMs: total
+            totalMs: total,
+            currentPage: tickCurrentPage,
+            nextPage: tickNextPage
           })
         })
 
         if (cancelRequested.value || !backfillActive) break
 
-        const currentPage = paginationHistory.value[paginationHistory.value.length - 1]
-        if (currentPage == null) {
+        const currentPageToLoad = paginationHistory.value[paginationHistory.value.length - 1]
+        if (currentPageToLoad == null) {
           hasReachedEnd.value = true
           break
         }
@@ -201,13 +225,14 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
           // Don't toggle isLoading here - keep it true throughout backfill
           // Check cancellation before starting getContent to avoid unnecessary requests
           if (cancelRequested.value || !backfillActive) break
-          const response = await getContent(currentPage)
+          const pageData = await getContent(currentPageToLoad)
           if (cancelRequested.value || !backfillActive) break
           // Clear error on successful load
           loadError.value = null
-          paginationHistory.value.push(response.nextPage)
+          currentPage.value = currentPageToLoad
+          paginationHistory.value.push(pageData.nextPage)
           // Update hasReachedEnd if nextPage is null
-          if (response.nextPage == null) {
+          if (pageData.nextPage == null) {
             hasReachedEnd.value = true
           }
         } catch (error) {
@@ -219,12 +244,25 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
         calls++
       }
 
-      emits('backfill:stop', { fetched: masonry.value.length, calls })
+      const stopCurrentPage = currentPage.value
+      const stopNextPage = paginationHistory.value[paginationHistory.value.length - 1]
+      emits('backfill:stop', {
+        fetched: masonry.value.length,
+        calls,
+        currentPage: stopCurrentPage,
+        nextPage: stopNextPage
+      })
     } finally {
       backfillActive = false
       // Only set loading to false when backfill completes or is cancelled
       isLoading.value = false
-      emits('loading:stop', { fetched: masonry.value.length })
+      const finalCurrentPage = currentPage.value
+      const finalNextPage = paginationHistory.value[paginationHistory.value.length - 1]
+      emits('loading:stop', {
+        fetched: masonry.value.length,
+        currentPage: finalCurrentPage,
+        nextPage: finalNextPage
+      })
     }
   }
 
@@ -242,24 +280,31 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
     try {
       const baseline = masonry.value.length
       if (cancelRequested.value) return
-      const response = await getContent(page)
+      const pageData = await getContent(page)
       if (cancelRequested.value) return
       // Clear error on successful load
       loadError.value = null
       currentPage.value = page  // Track the current page
-      paginationHistory.value.push(response.nextPage)
+      paginationHistory.value.push(pageData.nextPage)
       // Update hasReachedEnd if nextPage is null
-      if (response.nextPage == null) {
+      if (pageData.nextPage == null) {
         hasReachedEnd.value = true
       }
       await maybeBackfillToTarget(baseline)
-      return response
+      return pageData
     } catch (error) {
       // Set load error - error is handled and exposed to UI via loadError
       loadError.value = normalizeError(error)
       throw error
     } finally {
       isLoading.value = false
+      const finalCurrentPage = currentPage.value
+      const finalNextPage = paginationHistory.value[paginationHistory.value.length - 1]
+      emits('loading:stop', {
+        fetched: masonry.value.length,
+        currentPage: finalCurrentPage,
+        nextPage: finalNextPage
+      })
     }
   }
 
@@ -280,18 +325,18 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
       if (cancelRequested.value) return
 
       // Refresh mode: check if current page needs refreshing before loading next
-      if (mode === 'refresh' && currentPage.value != null) {
+      if (modeRef.value === 'refresh' && currentPage.value != null) {
         const currentPageItemCount = countItemsForPage(currentPage.value)
 
         // If current page has fewer items than pageSize, refresh it first
         if (currentPageItemCount < pageSize) {
-          const response = await fetchWithRetry(() => getPage(currentPage.value, context?.value))
+          const pageData = await fetchWithRetry(() => getPage(currentPage.value, context?.value))
           if (cancelRequested.value) return
 
           // Get only new items that don't already exist
           // We need to check against the current masonry state at this moment
           const currentMasonrySnapshot = [...masonry.value]
-          const newItems = response.items.filter((item: any) => {
+          const newItems = pageData.items.filter((item: any) => {
             if (!item || item.id == null || item.page == null) return false
             return !currentMasonrySnapshot.some((existing: any) => {
               return existing && existing.id === item.id && existing.page === item.page
@@ -301,9 +346,14 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
           // Append only new items to masonry (same pattern as getContent)
           if (newItems.length > 0) {
             const updatedItems = [...masonry.value, ...newItems]
+            masonry.value = updatedItems
+            await nextTick()
+
+            // Commit DOM updates without forcing sync reflow
+            await nextTick()
+            // Start FLIP on next tick (same pattern as restore/restoreMany)
+            await nextTick()
             refreshLayout(updatedItems)
-            // Wait a tick for masonry to update
-            await new Promise(resolve => setTimeout(resolve, 0))
           }
 
           // Clear error on successful load
@@ -350,8 +400,8 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
             await maybeBackfillToTarget(baseline)
             return nextResponse
           } else {
-            // Still not enough items, but we refreshed - return the refresh response
-            return response
+            // Still not enough items, but we refreshed - return the refresh pageData
+            return pageData
           }
         }
       }
@@ -363,25 +413,31 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
         hasReachedEnd.value = true
         return
       }
-      const response = await getContent(nextPageToLoad)
+      const pageData = await getContent(nextPageToLoad)
       if (cancelRequested.value) return
       // Clear error on successful load
       loadError.value = null
       currentPage.value = nextPageToLoad  // Track the current page
-      paginationHistory.value.push(response.nextPage)
+      paginationHistory.value.push(pageData.nextPage)
       // Update hasReachedEnd if nextPage is null
-      if (response.nextPage == null) {
+      if (pageData.nextPage == null) {
         hasReachedEnd.value = true
       }
       await maybeBackfillToTarget(baseline)
-      return response
+      return pageData
     } catch (error) {
       // Set load error - error is handled and exposed to UI via loadError
       loadError.value = normalizeError(error)
       throw error
     } finally {
       isLoading.value = false
-      emits('loading:stop', { fetched: masonry.value.length })
+      const finalCurrentPage = currentPage.value
+      const finalNextPage = paginationHistory.value[paginationHistory.value.length - 1]
+      emits('loading:stop', {
+        fetched: masonry.value.length,
+        currentPage: finalCurrentPage,
+        nextPage: finalNextPage
+      })
     }
   }
 
@@ -411,16 +467,16 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
       paginationHistory.value = [pageToRefresh]
 
       // Reload the current page
-      const response = await getContent(pageToRefresh)
+      const pageData = await getContent(pageToRefresh)
       if (cancelRequested.value) return
 
       // Clear error on successful load
       loadError.value = null
       // Update pagination state
       currentPage.value = pageToRefresh
-      paginationHistory.value.push(response.nextPage)
+      paginationHistory.value.push(pageData.nextPage)
       // Update hasReachedEnd if nextPage is null
-      if (response.nextPage == null) {
+      if (pageData.nextPage == null) {
         hasReachedEnd.value = true
       }
 
@@ -428,14 +484,20 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
       const baseline = masonry.value.length
       await maybeBackfillToTarget(baseline)
 
-      return response
+      return pageData
     } catch (error) {
       // Set load error - error is handled and exposed to UI via loadError
       loadError.value = normalizeError(error)
       throw error
     } finally {
       isLoading.value = false
-      emits('loading:stop', { fetched: masonry.value.length })
+      const finalCurrentPage = currentPage.value
+      const finalNextPage = paginationHistory.value[paginationHistory.value.length - 1]
+      emits('loading:stop', {
+        fetched: masonry.value.length,
+        currentPage: finalCurrentPage,
+        nextPage: finalNextPage
+      })
     }
   }
 
@@ -446,11 +508,23 @@ export function useMasonryPagination(options: UseMasonryPaginationOptions) {
     // Set backfillActive to false to immediately stop backfilling
     // The backfill loop checks this flag and will exit on the next iteration
     backfillActive = false
+    const cancelCurrentPage = currentPage.value
+    const cancelNextPage = paginationHistory.value[paginationHistory.value.length - 1]
     // If backfill was active, emit stop event immediately
     if (wasBackfilling) {
-      emits('backfill:stop', { fetched: masonry.value.length, calls: 0, cancelled: true })
+      emits('backfill:stop', {
+        fetched: masonry.value.length,
+        calls: 0,
+        cancelled: true,
+        currentPage: cancelCurrentPage,
+        nextPage: cancelNextPage
+      })
     }
-    emits('loading:stop', { fetched: masonry.value.length })
+    emits('loading:stop', {
+      fetched: masonry.value.length,
+      currentPage: cancelCurrentPage,
+      nextPage: cancelNextPage
+    })
   }
 
   return {