修复终端首屏图表加载动画

This commit is contained in:
2569718930@qq.com
2026-06-16 04:29:24 +08:00
parent 14e356c3c9
commit 1afd3c6976
3 changed files with 82 additions and 3 deletions
@@ -89,7 +89,8 @@ function TemperatureChartSkeleton({ compact }: { compact: boolean }) {
style={{ left: `${(index / Math.max(1, verticalLines - 1)) * 100}%` }}
/>
))}
<div className="absolute inset-x-10 top-1/3 h-10 rounded bg-slate-100/60" />
<div className="absolute inset-x-10 top-1/3 h-10 animate-pulse rounded bg-gradient-to-r from-slate-100 via-blue-100 to-slate-100" />
<div className="absolute inset-y-0 -left-1/3 w-1/3 animate-pulse bg-gradient-to-r from-transparent via-white/80 to-transparent" />
</div>
</div>
);
@@ -101,9 +101,10 @@ export function runTests() {
"terminal guide must describe the new 3x2 maximum layout instead of 3x3",
);
assert(
dashboardSource.includes("if (!cityInSlot || !rowForSlot)") &&
dashboardSource.includes("LoadingSlotCard") &&
dashboardSource.includes("cityInSlot && !rowForSlot && refreshing") &&
dashboardSource.includes("handleSelectCityForSlot(slotIndex, null);"),
"stale saved chart slots must render the empty city picker instead of a row=null Temperature Chart",
"terminal must show a loading chart card for saved cities while the first scan rows are still loading, then fall back to the empty picker for stale slots",
);
assert(
dashboardSource.includes("absolute left-1/2 top-12 z-50") &&
@@ -223,6 +224,12 @@ export function runTests() {
}),
"temperature chart should show the loading skeleton while the first detail fetch is in flight and no drawable data exists",
);
assert(
chartCanvasSource.includes("animate-pulse") &&
chartCanvasSource.includes("Loading chart") &&
chartCanvasSource.includes("bg-gradient-to-r"),
"temperature chart loading skeleton must include visible animation on cold first-open charts",
);
assert(
!__shouldKeepTemperatureChartLoadingForTest({
row: { city: "Moscow" } as any,