@viliha/vui-ui 1.14.0 → 1.14.2

package/CHANGELOG.md

@@ -7,6 +7,31 @@ backward-compatible features, **major** for breaking changes.
 
 To upgrade, see [Upgrading](./AGENT.md#upgrading) in the agent guide.
 
+## 1.14.2 — 2026-07-26
+
+### Changed
+
+- **Consistent loading feedback in `fetcher` mode.** A cache hit is served from
+  the in-memory cache (no server round-trip), but the loading shimmer now stays
+  up for a short minimum (300ms) so a cached load looks the same as a real
+  fetch — no confusing "loading but blank" flash on tab switch. Real fetches
+  longer than the minimum are unaffected; background (post-mutation) refetches
+  stay silent.
+
+  Note: the `fetcher` cache (added in 1.14.0) stores each page's data in a
+  module-scoped `Map` in JS memory, so switching tabs serves from memory and does
+  **not** re-hit the server. If you still see a refetch, you're on a build older
+  than 1.14.0 (the demo before that had no cache).
+
+## 1.14.1 — 2026-07-26
+
+### Fixed
+
+- **Per-field Filter panel layout.** The header ("Filter") and the footer
+  (Clear / Search) are now static — only the fields scroll — so the actions stay
+  in view on a long filter form. The footer's top border spans the full panel
+  width, and the action buttons are compact (`size="sm"`).
+
 ## 1.14.0 — 2026-07-26
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.14.0",
+  "version": "1.14.2",
   "description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
   "license": "MIT",
   "author": "Suman Bonakurthi",

package/src/record-view.tsx

@@ -359,6 +359,11 @@ function resolveOptions<T>(
 type RvCacheEntry = { rows: unknown[]; total: number; at: number };
 const RV_CACHE = new Map<string, Map<string, RvCacheEntry>>();
 
+// Minimum time the loading shimmer stays up per `fetcher` load, so a cache hit
+// (instant, from memory) shows the same animation as a real fetch — consistent
+// feedback instead of a blank flash. Real fetches longer than this are unaffected.
+const RV_MIN_LOADING_MS = 300;
+
 function rvQueryKey<T>(q: ServerQuery<T>): string {
   return JSON.stringify([q.page, q.pageSize, q.sort, q.search, q.filters]);
 }
@@ -528,17 +533,32 @@ export function RecordView<T extends { id: RowId }>({
   const runFetch = React.useCallback(
     (q: ServerQuery<T>, opts?: { background?: boolean }) => {
       if (!fetcher) return;
-      // Foreground: serve from cache if present (instant, no shimmer).
+      const id = ++reqIdRef.current;
+      const started = Date.now();
+      // Reveal the data, but hold the shimmer for a consistent minimum so a
+      // cache hit (served from memory, no server call) looks the same as a real
+      // fetch — same animation every time, never a confusing blank flash.
+      const commit = (rows: T[], total: number) => {
+        const apply = () => {
+          if (id !== reqIdRef.current) return; // superseded
+          setFetchedData(rows);
+          setFetchedTotal(total);
+          setFetchedLoading(false);
+        };
+        const wait = RV_MIN_LOADING_MS - (Date.now() - started);
+        if (opts?.background || wait <= 0) apply();
+        else window.setTimeout(apply, wait);
+      };
+
+      // Foreground cache hit: no server round-trip — the data is in memory.
       if (!opts?.background && cacheKey) {
         const hit = rvCacheGet(cacheKey, rvQueryKey(q), ttlMs);
         if (hit) {
-          setFetchedData(hit.rows as T[]);
-          setFetchedTotal(hit.total);
-          setFetchedLoading(false);
+          setFetchedLoading(true);
+          commit(hit.rows as T[], hit.total);
           return;
         }
       }
-      const id = ++reqIdRef.current;
       abortRef.current?.abort();
       const controller = new AbortController();
       abortRef.current = controller;
@@ -553,9 +573,7 @@ export function RecordView<T extends { id: RowId }>({
               { rows: res.rows, total: res.total, at: Date.now() },
               cacheMax,
             );
-          setFetchedData(res.rows);
-          setFetchedTotal(res.total);
-          setFetchedLoading(false);
+          commit(res.rows, res.total);
         })
         .catch((err) => {
           if (controller.signal.aborted || id !== reqIdRef.current) return;
@@ -1363,8 +1381,11 @@ export function RecordView<T extends { id: RowId }>({
               // Search / Clear. The panel only gathers values — matching is the
               // consumer's job via `onFilter` (see the field's `filterable`).
               <>
-                <DropdownLabel>Filter</DropdownLabel>
-                <div className="flex max-h-80 w-72 flex-col gap-3 overflow-y-auto p-3">
+                <div className="flex max-h-[min(28rem,70vh)] w-72 flex-col">
+                  {/* Header: static, full-width separator (from DropdownLabel). */}
+                  <DropdownLabel>Filter</DropdownLabel>
+                  {/* Content: the only scrolling region. */}
+                  <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto p-3">
                   {filterFields.map((f) => {
                     const cfg: FieldFilter<T> =
                       typeof f.filterable === "object" ? f.filterable : {};
@@ -1453,8 +1474,11 @@ export function RecordView<T extends { id: RowId }>({
                       </div>
                     );
                   })}
-                  <div className="flex items-center justify-end gap-2 border-t border-border pt-3">
+                  </div>
+                  {/* Footer: static, full-width top border, compact buttons. */}
+                  <div className="flex shrink-0 items-center justify-end gap-2 border-t border-border p-3">
                     <Button
+                      size="sm"
                       onClick={() => {
                         setFilterValues({});
                         onFilter?.({});
@@ -1473,6 +1497,7 @@ export function RecordView<T extends { id: RowId }>({
                       Clear
                     </Button>
                     <Button
+                      size="sm"
                       variant="primary"
                       onClick={() => {
                         onFilter?.(filterValues);