@wyxos/vibe 1.2.15 → 1.2.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wyxos/vibe",
-  "version": "1.2.15",
+  "version": "1.2.16",
   "main": "index.js",
   "module": "index.js",
   "type": "module",

package/src/Masonry.vue

@@ -129,14 +129,38 @@ async function getContent(page) {
 }
 
 async function loadPage(page) {
-  const response = await getContent(page)
-  paginationHistory.value.push(response.nextPage)
-  return response
+  if (isLoading.value) return // Prevent concurrent loading
+  
+  isLoading.value = true
+  
+  try {
+    const response = await getContent(page)
+    paginationHistory.value.push(response.nextPage)
+    return response
+  } catch (error) {
+    console.error('Error loading page:', error)
+    throw error
+  } finally {
+    isLoading.value = false
+  }
 }
 
 async function loadNext() {
-  const currentPage = paginationHistory.value[paginationHistory.value.length - 1]
-  return await loadPage(currentPage)
+  if (isLoading.value) return // Prevent concurrent loading
+  
+  isLoading.value = true
+  
+  try {
+    const currentPage = paginationHistory.value[paginationHistory.value.length - 1]
+    const response = await getContent(currentPage)
+    paginationHistory.value.push(response.nextPage)
+    return response
+  } catch (error) {
+    console.error('Error loading next page:', error)
+    throw error
+  } finally {
+    isLoading.value = false
+  }
 }
 
 function onRemove(item) {
@@ -149,25 +173,25 @@ function onResize() {
 }
 
 onMounted(async () => {
-  isLoading.value = true
-
-  columns.value = getColumnCount(layout.value)
-
-  // For cursor-based pagination, loadAtPage can be null for the first request
-  const initialPage = props.loadAtPage
-  paginationHistory.value = [initialPage]
-
-  // Skip initial load if skipInitialLoad prop is true
-  if (!props.skipInitialLoad) {
-    await loadPage(paginationHistory.value[0])
-  } else {
-    await nextTick()
-    // Just refresh the layout with any existing items
-    refreshLayout(masonry.value)
+  try {
+    columns.value = getColumnCount(layout.value)
+
+    // For cursor-based pagination, loadAtPage can be null for the first request
+    const initialPage = props.loadAtPage
+    paginationHistory.value = [initialPage]
+
+    // Skip initial load if skipInitialLoad prop is true
+    if (!props.skipInitialLoad) {
+      await loadPage(paginationHistory.value[0]) // loadPage manages its own loading state
+    } else {
+      await nextTick()
+      // Just refresh the layout with any existing items
+      refreshLayout(masonry.value)
+    }
+  } catch (error) {
+    console.error('Error during component initialization:', error)
   }
 
-  isLoading.value = false
-
   container.value?.addEventListener('scroll', debounce(handleScroll, 200));
 
   window.addEventListener('resize', debounce(onResize, 200));

package/src/useMasonryScroll.js

@@ -24,16 +24,17 @@ export function useMasonryScroll({
     const reachedContainerBottom = scrollTop + clientHeight >= containerHeight.value - 1
 
     if ((whitespaceVisible || reachedContainerBottom) && !isLoading.value) {
-      isLoading.value = true
+      try {
+        // Handle cleanup when too many items
+        if (masonry.value.length > maxItems) {
+          await handleItemCleanup(columnHeights)
+        }
 
-      // Handle cleanup when too many items
-      if (masonry.value.length > maxItems) {
-        await handleItemCleanup(columnHeights)
+        await loadNext() // loadNext manages its own loading state
+        await nextTick()
+      } catch (error) {
+        console.error('Error in scroll handler:', error)
       }
-
-      await loadNext()
-      await nextTick()
-      isLoading.value = false
     }
   }
 
@@ -41,9 +42,7 @@ export function useMasonryScroll({
     const firstItem = masonry.value[0]
     
     if (!firstItem) {
-      await loadNext()
-      await nextTick()
-      isLoading.value = false
+      // Don't set isLoading here - let main handleScroll manage it
       return
     }
 
@@ -51,9 +50,7 @@ export function useMasonryScroll({
     const removedItems = masonry.value.filter(i => i.page !== page)
     
     if (removedItems.length === masonry.value.length) {
-      await loadNext()
-      await nextTick()
-      isLoading.value = false
+      // Don't set isLoading here - let main handleScroll manage it  
       return
     }