mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-09-19 21:32:20 +03:00
601470b894
* fix(dashboard): make quota cards container responsive * test(dashboard): assert #7072 mobile guard behaviorally, not by literal token The #7072 regression guard asserted the literal `grid-cols-1` class token, which only fits a breakpoint-driven grid. This PR switched the per-group card grid to a container-driven `auto-fit`/`minmax()` template, which the guard doesn't recognize even though it also guarantees a single column on mobile-width viewports. Rewrite the guard to assert the underlying behavior — single column on mobile — accepting either the breakpoint model (unprefixed grid-cols-1) or the auto-fit model (a minmax() track wide enough that two columns can't fit on a phone viewport). Reverting to the pre-#7072 forced grid-cols-2 still fails the guard. * fix(dashboard): keep stale quota rows during refresh Refreshing a quota card replaced its entire quota section with a loading placeholder. The card height collapsed and then grew back when data arrived, and each height change rebalanced the outer 2xl CSS multi-column layout, making provider groups visibly jump between columns (flash). Show the loading placeholder only on the initial load (nothing to display yet). During a refresh the stale rows stay rendered while the refresh button icon spins, and the UI swaps in new data once it arrives. Also keep the expand/collapse button visible during refresh so its row does not add another height change.
29 lines
1.3 KiB
TypeScript
29 lines
1.3 KiB
TypeScript
import { test } from "node:test";
|
|
import assert from "node:assert/strict";
|
|
import { shouldShowLoadingPlaceholder } from "@/app/(dashboard)/dashboard/usage/components/ProviderLimits/parts/QuotaCardExpanded";
|
|
|
|
// The loading placeholder replaces the entire quota section with a spinner.
|
|
// Swapping rows for a spinner mid-refresh collapses the card height, which
|
|
// rebalances the outer CSS multi-column layout (provider groups visibly jump
|
|
// between columns). During a refresh the existing rows must stay rendered —
|
|
// the refresh button icon already spins — so only the initial load (nothing
|
|
// to display yet) may show the placeholder.
|
|
|
|
test("initial load with no quota data shows the placeholder", () => {
|
|
assert.equal(shouldShowLoadingPlaceholder(true, 0), true);
|
|
});
|
|
|
|
test("refresh with existing quota rows keeps them rendered", () => {
|
|
assert.equal(shouldShowLoadingPlaceholder(true, 3), false);
|
|
assert.equal(shouldShowLoadingPlaceholder(true, 1), false);
|
|
});
|
|
|
|
test("refresh with only a provider message keeps it rendered", () => {
|
|
assert.equal(shouldShowLoadingPlaceholder(true, 0, "re-authenticate this account."), false);
|
|
});
|
|
|
|
test("not loading never shows the placeholder", () => {
|
|
assert.equal(shouldShowLoadingPlaceholder(false, 0), false);
|
|
assert.equal(shouldShowLoadingPlaceholder(false, 3), false);
|
|
});
|