@asteby/metacore-runtime-react 23.12.3 → 24.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @asteby/metacore-runtime-react
 
+## 24.0.0
+
+### Patch Changes
+
+- 165f25c: feat(dynamic-table): cache first-page rows for instant reload paint
+
+  The table fetched rows into local state, so a full reload showed a full-table
+  skeleton until `/data/:model` resolved — even for the view just seen. Stash the
+  last first-page result in sessionStorage (org/user-scoped → must not outlive the
+  tab session) keyed by model+endpoint+branch+URL params, and seed the initial
+  rows from it so a reload paints instantly and revalidates in the background
+  (stale-while-revalidate).
+
+- Updated dependencies [0704d54]
+  - @asteby/metacore-ui@2.10.0
+
 ## 23.12.3
 
 ### Patch 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,+BAsnCnB"}
+{"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;AAiEnF,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,+BAupCnB"}

package/dist/dynamic-table.js

@@ -33,6 +33,48 @@ import { useCan, usePermissionsActive, gateTableMetadata } from './permissions-c
 import { useDynamicRowActions } from './dynamic-row-actions';
 import { ExportDialog } from './dialogs/export';
 import { ImportDialog } from './dialogs/import';
+// ---------------------------------------------------------------------------
+// Row-data cache (perceived performance).
+//
+// The table fetches rows into local state, so a full page reload starts empty
+// and shows a full skeleton until `/data/:model` resolves — even for a view the
+// user just looked at. We stash the last first-page result and seed the initial
+// state from it so a reload paints the previous rows instantly and the fetch
+// below revalidates in the background (stale-while-revalidate).
+//
+// Deliberately `sessionStorage`, NOT localStorage: row data is org/user-scoped,
+// so it must not outlive the tab session (a browser restart or a different login
+// starts clean). The key includes model+endpoint+branch+URL params so a
+// different filter / sort / page never paints the wrong rows. Only the first
+// page is cached (capped) — infinite-scroll top-ups re-fetch on scroll.
+const TBL_DATA_CACHE_PREFIX = 'mc:tbl:data:v1';
+function tableDataCacheKey(model, endpoint, branchId, search) {
+    const p = new URLSearchParams(search);
+    const parts = [];
+    p.forEach((v, k) => parts.push(`${k}=${v}`));
+    parts.sort();
+    return `${TBL_DATA_CACHE_PREFIX}|${model || ''}|${endpoint || ''}|${branchId || ''}|${parts.join('&')}`;
+}
+function readTableDataCache(key) {
+    try {
+        const raw = sessionStorage.getItem(key);
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        return parsed && Array.isArray(parsed.rows) ? parsed : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeTableDataCache(key, rows, rowCount) {
+    try {
+        sessionStorage.setItem(key, JSON.stringify({ rows: rows.slice(0, 50), rowCount, ts: Date.now() }));
+    }
+    catch {
+        // quota / private mode — the cache is a nicety, never fatal
+    }
+}
 export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColumns = [], onAction, onRowClick, refreshTrigger, defaultFilters, extraColumns = [], getDynamicColumns = defaultGetDynamicColumns, timeZone, currency, infiniteScroll = false, }) {
     const { t, i18n } = useTranslation();
     const api = useApi();
@@ -41,12 +83,22 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     const { getMetadata, setMetadata: cacheMetadata } = useMetadataCache();
     const cachedMeta = getMetadata(model);
     const [metadata, setMetadata] = useState(cachedMeta || null);
-    const [data, setData] = useState([]);
+    // Read the row-data cache ONCE at mount (before the fetch effects run) so the
+    // first paint uses the previous rows for this exact view instead of skeletons.
+    const bootDataKey = tableDataCacheKey(model, endpoint, currentBranch?.id, typeof window !== 'undefined' ? window.location.search : '');
+    const bootDataRef = useRef(undefined);
+    if (bootDataRef.current === undefined) {
+        bootDataRef.current = enableUrlSync ? readTableDataCache(bootDataKey) : null;
+    }
+    const bootData = bootDataRef.current;
+    const [data, setData] = useState(bootData?.rows ?? []);
     // Footer totals: per-column SUM over the FILTERED set, fetched from a
     // separate /aggregate endpoint (NOT summed from the visible page).
     const [footerTotals, setFooterTotals] = useState({});
     const [loading, setLoading] = useState(!cachedMeta);
-    const [loadingData, setLoadingData] = useState(true);
+    // Cached rows → no full-table skeleton on reload; the background fetch still
+    // runs and swaps in fresh data.
+    const [loadingData, setLoadingData] = useState(!(bootData?.rows?.length));
     // 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);
@@ -72,7 +124,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
     const [columnFilters, setColumnFilters] = useState([]);
     const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 10 });
     const [globalFilter, setGlobalFilter] = useState('');
-    const [rowCount, setRowCount] = useState(0);
+    const [rowCount, setRowCount] = useState(bootData?.rowCount ?? 0);
     const [dateRange, setDateRange] = useState(undefined);
     const [dynamicFilters, setDynamicFilters] = useState({});
     const [filterOptionsMap, setFilterOptionsMap] = useState(new Map());
@@ -475,9 +527,15 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             };
             const res = await api.get(endpoint || `/data/${model}`, { params });
             if (res.data.success) {
-                setData(res.data.data || []);
+                const rows = res.data.data || [];
+                setData(rows);
                 if (res.data.meta)
                     setRowCount(res.data.meta.total);
+                // Cache the first page for an instant reload paint (see the cache
+                // helpers). Keyed off the live URL so it matches the next mount.
+                if (enableUrlSync && pagination.pageIndex === 0) {
+                    writeTableDataCache(tableDataCacheKey(model, endpoint, currentBranch?.id, window.location.search), rows, res.data.meta?.total ?? rows.length);
+                }
             }
         }
         catch (error) {
@@ -486,7 +544,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
         finally {
             setLoadingData(false);
         }
-    }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api]);
+    }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api, enableUrlSync]);
     // Columns whose metadata opts into a footer total (display_config.aggregate
     // → styleConfig.aggregate). When empty, no footer row is rendered and no
     // aggregate request is made.
@@ -532,6 +590,10 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
                 setData((prev) => (append ? dedupeById(prev, rows) : rows));
                 if (res.data.meta)
                     setRowCount(res.data.meta.total);
+                // Cache the first (replace) page for an instant reload paint.
+                if (!append && enableUrlSync) {
+                    writeTableDataCache(tableDataCacheKey(model, endpoint, currentBranch?.id, window.location.search), rows, res.data.meta?.total ?? rows.length);
+                }
                 // 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
@@ -548,7 +610,7 @@ export function DynamicTable({ model, endpoint, enableUrlSync = true, hiddenColu
             else
                 setLoadingData(false);
         }
-    }, [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id]);
+    }, [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id, enableUrlSync]);
     // Signature of everything that must reset the incremental list to page 1:
     // the filters/search AND the sort (both live in buildFilterParams).
     const filterSignature = useMemo(() => JSON.stringify(buildFilterParams()), [buildFilterParams]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.12.3",
+  "version": "24.0.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "sonner": ">=1.7",
     "zustand": ">=5",
     "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.9.3"
+    "@asteby/metacore-ui": "^2.10.0"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.9.3"
+    "@asteby/metacore-ui": "2.10.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/dynamic-table.tsx

@@ -77,6 +77,58 @@ import { useDynamicRowActions } from './dynamic-row-actions'
 import { ExportDialog } from './dialogs/export'
 import { ImportDialog } from './dialogs/import'
 
+// ---------------------------------------------------------------------------
+// Row-data cache (perceived performance).
+//
+// The table fetches rows into local state, so a full page reload starts empty
+// and shows a full skeleton until `/data/:model` resolves — even for a view the
+// user just looked at. We stash the last first-page result and seed the initial
+// state from it so a reload paints the previous rows instantly and the fetch
+// below revalidates in the background (stale-while-revalidate).
+//
+// Deliberately `sessionStorage`, NOT localStorage: row data is org/user-scoped,
+// so it must not outlive the tab session (a browser restart or a different login
+// starts clean). The key includes model+endpoint+branch+URL params so a
+// different filter / sort / page never paints the wrong rows. Only the first
+// page is cached (capped) — infinite-scroll top-ups re-fetch on scroll.
+const TBL_DATA_CACHE_PREFIX = 'mc:tbl:data:v1'
+interface TableDataCacheEntry { rows: any[]; rowCount: number; ts: number }
+
+function tableDataCacheKey(
+    model: string | undefined,
+    endpoint: string | undefined,
+    branchId: string | number | null | undefined,
+    search: string,
+): string {
+    const p = new URLSearchParams(search)
+    const parts: string[] = []
+    p.forEach((v, k) => parts.push(`${k}=${v}`))
+    parts.sort()
+    return `${TBL_DATA_CACHE_PREFIX}|${model || ''}|${endpoint || ''}|${branchId || ''}|${parts.join('&')}`
+}
+
+function readTableDataCache(key: string): TableDataCacheEntry | null {
+    try {
+        const raw = sessionStorage.getItem(key)
+        if (!raw) return null
+        const parsed = JSON.parse(raw)
+        return parsed && Array.isArray(parsed.rows) ? parsed : null
+    } catch {
+        return null
+    }
+}
+
+function writeTableDataCache(key: string, rows: any[], rowCount: number): void {
+    try {
+        sessionStorage.setItem(
+            key,
+            JSON.stringify({ rows: rows.slice(0, 50), rowCount, ts: Date.now() }),
+        )
+    } catch {
+        // quota / private mode — the cache is a nicety, never fatal
+    }
+}
+
 export interface DynamicTableProps {
     model: string
     endpoint?: string
@@ -148,12 +200,27 @@ export function DynamicTable({
     const cachedMeta = getMetadata(model)
 
     const [metadata, setMetadata] = useState<TableMetadata | null>(cachedMeta || null)
-    const [data, setData] = useState<any[]>([])
+    // Read the row-data cache ONCE at mount (before the fetch effects run) so the
+    // first paint uses the previous rows for this exact view instead of skeletons.
+    const bootDataKey = tableDataCacheKey(
+        model,
+        endpoint,
+        currentBranch?.id,
+        typeof window !== 'undefined' ? window.location.search : '',
+    )
+    const bootDataRef = useRef<TableDataCacheEntry | null | undefined>(undefined)
+    if (bootDataRef.current === undefined) {
+        bootDataRef.current = enableUrlSync ? readTableDataCache(bootDataKey) : null
+    }
+    const bootData = bootDataRef.current
+    const [data, setData] = useState<any[]>(bootData?.rows ?? [])
     // Footer totals: per-column SUM over the FILTERED set, fetched from a
     // separate /aggregate endpoint (NOT summed from the visible page).
     const [footerTotals, setFooterTotals] = useState<Record<string, any>>({})
     const [loading, setLoading] = useState(!cachedMeta)
-    const [loadingData, setLoadingData] = useState(true)
+    // Cached rows → no full-table skeleton on reload; the background fetch still
+    // runs and swaps in fresh data.
+    const [loadingData, setLoadingData] = useState(!(bootData?.rows?.length))
     // 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)
@@ -182,7 +249,7 @@ export function DynamicTable({
     const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
     const [pagination, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: 10 })
     const [globalFilter, setGlobalFilter] = useState('')
-    const [rowCount, setRowCount] = useState(0)
+    const [rowCount, setRowCount] = useState(bootData?.rowCount ?? 0)
 
     const [dateRange, setDateRange] = useState<DateRange | undefined>(undefined)
     const [dynamicFilters, setDynamicFilters] = useState<Record<string, string[]>>({})
@@ -557,15 +624,25 @@ export function DynamicTable({
             }
             const res = await api.get(endpoint || `/data/${model}`, { params }) as { data: ApiResponse<any[]> }
             if (res.data.success) {
-                setData(res.data.data || [])
+                const rows = res.data.data || []
+                setData(rows)
                 if (res.data.meta) setRowCount(res.data.meta.total)
+                // Cache the first page for an instant reload paint (see the cache
+                // helpers). Keyed off the live URL so it matches the next mount.
+                if (enableUrlSync && pagination.pageIndex === 0) {
+                    writeTableDataCache(
+                        tableDataCacheKey(model, endpoint, currentBranch?.id, window.location.search),
+                        rows,
+                        res.data.meta?.total ?? rows.length,
+                    )
+                }
             }
         } catch (error) {
             console.error('Error al cargar los datos', error)
         } finally {
             setLoadingData(false)
         }
-    }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api])
+    }, [model, metadata, pagination, buildFilterParams, refreshTrigger, endpoint, currentBranch?.id, api, enableUrlSync])
 
     // Columns whose metadata opts into a footer total (display_config.aggregate
     // → styleConfig.aggregate). When empty, no footer row is rendered and no
@@ -613,6 +690,14 @@ export function DynamicTable({
                     const rows = res.data.data || []
                     setData((prev) => (append ? dedupeById(prev, rows) : rows))
                     if (res.data.meta) setRowCount(res.data.meta.total)
+                    // Cache the first (replace) page for an instant reload paint.
+                    if (!append && enableUrlSync) {
+                        writeTableDataCache(
+                            tableDataCacheKey(model, endpoint, currentBranch?.id, window.location.search),
+                            rows,
+                            res.data.meta?.total ?? rows.length,
+                        )
+                    }
                     // 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
@@ -626,7 +711,7 @@ export function DynamicTable({
                 else setLoadingData(false)
             }
         },
-        [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id],
+        [metadata, buildFilterParams, endpoint, model, api, currentBranch?.id, enableUrlSync],
     )
 
     // Signature of everything that must reset the incremental list to page 1: