@asteby/metacore-runtime-react 23.11.0 → 23.11.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @asteby/metacore-runtime-react
 
+## 23.11.1
+
+### Patch Changes
+
+- 6e3cf4f: DynamicTable: el sentinel de infinite scroll se detiene cuando el backend devuelve una página corta/vacía, aunque meta.total reporte más filas de las que la lista entrega (drift count vs list). Elimina el skeleton accent parpadeando bajo las filas.
+
 ## 23.11.0
 
 ### Minor Changes

package/dist/dynamic-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAanF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BA8iCnB"}
+{"version":3,"file":"dynamic-table.d.ts","sourceRoot":"","sources":["../src/dynamic-table.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAKH,KAAK,SAAS,EAajB,MAAM,uBAAuB,CAAA;AAgC9B,OAAO,KAAK,EAAsB,iBAAiB,EAAE,MAAM,wBAAwB,CAAA;AAanF,MAAM,WAAW,iBAAiB;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;;;OAKG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IACpC,YAAY,CAAC,EAAE,SAAS,CAAC,GAAG,CAAC,EAAE,CAAA;IAC/B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAA;IACrC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CAC3B;AAED,wBAAgB,YAAY,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,aAAoB,EACpB,aAAkB,EAClB,QAAQ,EACR,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAiB,EACjB,iBAA4C,EAC5C,QAAQ,EACR,QAAQ,EACR,cAAsB,GACzB,EAAE,iBAAiB,+BAujCnB"}

package/dist/dynamic-table.js

@@ -50,6 +50,10 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     // Infinite-scroll: a top-up page is in flight (distinct from the initial
     // page load so only a small bottom spinner shows, not the whole-table one).
     const [loadingMore, setLoadingMore] = useState(false);
+    // True once the backend returned a short/empty page: no more rows exist
+    // even if meta.total says otherwise (count/list drift would otherwise
+    // keep the sentinel re-firing forever). Reset by any page-1 fetch.
+    const [infExhausted, setInfExhausted] = useState(false);
     const infPageRef = useRef(1);
     const [optionsMap, setOptionsMap] = useState(new Map());
     const [exportOpen, setExportOpen] = useState(false);
@@ -467,6 +471,11 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 setData((prev) => (append ? dedupeById(prev, rows) : rows));
                 if (res.data.meta)
                     setRowCount(res.data.meta.total);
+                // A short page means the backend has no more rows, even if
+                // meta.total disagrees with the visible count (count query
+                // vs list query drift, dedupe). Without this the sentinel
+                // re-fires forever on empty pages.
+                setInfExhausted(rows.length < infPageSize);
             }
         }
         catch (error) {
@@ -483,19 +492,19 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     // the filters/search AND the sort (both live in buildFilterParams).
     const filterSignature = useMemo(() => JSON.stringify(buildFilterParams()), [buildFilterParams]);
     const loadNextPage = useCallback(() => {
-        if (loadingMore || loadingData)
+        if (loadingMore || loadingData || infExhausted)
             return;
         if (data.length >= rowCount)
             return;
         infPageRef.current += 1;
         void fetchPage(infPageRef.current, true);
-    }, [loadingMore, loadingData, data.length, rowCount, fetchPage]);
+    }, [loadingMore, loadingData, infExhausted, data.length, rowCount, fetchPage]);
     // Infinite-scroll sentinels. There are two scroll containers (desktop
     // table + mobile card list) but only one is laid out at a time — the CSS
     // `hidden`/`sm:hidden` container has no box, so its observer never fires.
     // Each sentinel drives the SAME `loadNextPage`; its internal guards + the
     // `disabled` flag keep concurrent/exhausted fetches from doubling up.
-    const infScrollDisabled = !infiniteScroll || loadingMore || loadingData || data.length >= rowCount;
+    const infScrollDisabled = !infiniteScroll || loadingMore || loadingData || infExhausted || data.length >= rowCount;
     const { rootRef: infDesktopRoot, sentinelRef: infDesktopSentinel } = useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled });
     const { rootRef: infMobileRoot, sentinelRef: infMobileSentinel } = useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled });
     const initialFetchDone = useRef(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.11.0",
+  "version": "23.11.1",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

package/src/dynamic-table.tsx

@@ -157,6 +157,10 @@ export function DynamicTable({
     // Infinite-scroll: a top-up page is in flight (distinct from the initial
     // page load so only a small bottom spinner shows, not the whole-table one).
     const [loadingMore, setLoadingMore] = useState(false)
+    // True once the backend returned a short/empty page: no more rows exist
+    // even if meta.total says otherwise (count/list drift would otherwise
+    // keep the sentinel re-firing forever). Reset by any page-1 fetch.
+    const [infExhausted, setInfExhausted] = useState(false)
     const infPageRef = useRef(1)
     const [optionsMap, setOptionsMap] = useState<Map<string, any[]>>(new Map())
 
@@ -546,6 +550,11 @@ export function DynamicTable({
                     const rows = res.data.data || []
                     setData((prev) => (append ? dedupeById(prev, rows) : rows))
                     if (res.data.meta) setRowCount(res.data.meta.total)
+                    // A short page means the backend has no more rows, even if
+                    // meta.total disagrees with the visible count (count query
+                    // vs list query drift, dedupe). Without this the sentinel
+                    // re-fires forever on empty pages.
+                    setInfExhausted(rows.length < infPageSize)
                 }
             } catch (error) {
                 console.error('Error al cargar los datos', error)
@@ -565,11 +574,11 @@ export function DynamicTable({
     )
 
     const loadNextPage = useCallback(() => {
-        if (loadingMore || loadingData) return
+        if (loadingMore || loadingData || infExhausted) return
         if (data.length >= rowCount) return
         infPageRef.current += 1
         void fetchPage(infPageRef.current, true)
-    }, [loadingMore, loadingData, data.length, rowCount, fetchPage])
+    }, [loadingMore, loadingData, infExhausted, data.length, rowCount, fetchPage])
 
     // Infinite-scroll sentinels. There are two scroll containers (desktop
     // table + mobile card list) but only one is laid out at a time — the CSS
@@ -577,7 +586,7 @@ export function DynamicTable({
     // Each sentinel drives the SAME `loadNextPage`; its internal guards + the
     // `disabled` flag keep concurrent/exhausted fetches from doubling up.
     const infScrollDisabled =
-        !infiniteScroll || loadingMore || loadingData || data.length >= rowCount
+        !infiniteScroll || loadingMore || loadingData || infExhausted || data.length >= rowCount
     const { rootRef: infDesktopRoot, sentinelRef: infDesktopSentinel } =
         useInfiniteScrollSentinel({ onLoadMore: loadNextPage, disabled: infScrollDisabled })
     const { rootRef: infMobileRoot, sentinelRef: infMobileSentinel } =