移除图表点击时的毛玻璃 loading 蒙层,改为静默后台更新

This commit is contained in:
2569718930@qq.com
2026-05-26 09:54:16 +08:00
parent fbd00df72f
commit 14252915ab
@@ -2,7 +2,6 @@
import clsx from "clsx"; import clsx from "clsx";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { LoadingSignal } from "@/components/dashboard/scan-terminal/LoadingSignal";
import { import {
CartesianGrid, CartesianGrid,
Line, Line,
@@ -1155,7 +1154,6 @@ export function LiveTemperatureThresholdChart({
slotIndex?: number; slotIndex?: number;
}) { }) {
const [hourly, setHourly] = useState<HourlyForecast>(null); const [hourly, setHourly] = useState<HourlyForecast>(null);
const [isFetching, setIsFetching] = useState(false);
const city = String(row?.city || "").toLowerCase().trim(); const city = String(row?.city || "").toLowerCase().trim();
const [timeframe, setTimeframe] = useState<"1D" | "3D">("1D"); const [timeframe, setTimeframe] = useState<"1D" | "3D">("1D");
const [userToggledKeys, setUserToggledKeys] = useState<Record<string, boolean>>({}); const [userToggledKeys, setUserToggledKeys] = useState<Record<string, boolean>>({});
@@ -1181,12 +1179,10 @@ export function LiveTemperatureThresholdChart({
if (cached && Date.now() - cached.ts < HOURLY_CACHE_TTL_MS) { if (cached && Date.now() - cached.ts < HOURLY_CACHE_TTL_MS) {
setHourly(cached.data); setHourly(cached.data);
setIsFetching(false);
return; return;
} }
setHourly(seedHourlyForecastFromRow(row)); setHourly(seedHourlyForecastFromRow(row));
setIsFetching(true);
let cancelled = false; let cancelled = false;
// Prioritize active slots, stagger/delay background slots to optimize load performance // Prioritize active slots, stagger/delay background slots to optimize load performance
@@ -1197,11 +1193,8 @@ export function LiveTemperatureThresholdChart({
.then((data) => { .then((data) => {
if (cancelled || !data) return; if (cancelled || !data) return;
setHourly(data); setHourly(data);
setIsFetching(false);
}) })
.catch(() => { .catch(() => {});
if (!cancelled) setIsFetching(false);
});
}, delay); }, delay);
return () => { return () => {
@@ -1488,16 +1481,7 @@ export function LiveTemperatureThresholdChart({
); );
return ( return (
<Panel title={panelTitle} actions={timeframeActions} className="relative"> <Panel title={panelTitle} actions={timeframeActions}>
{isFetching && (
<div className="absolute inset-0 z-50 flex items-center justify-center bg-white/70 backdrop-blur-sm dark:bg-slate-950/70 rounded-[4px]">
<LoadingSignal
title={isEn ? "Loading city data..." : "加载城市数据中..."}
description={isEn ? `Fetching latest observations for ${row?.city_display_name || row?.city || "this city"}` : `正在获取 ${row?.city_display_name || row?.city || "该城市"} 的最新观测数据`}
compact={compact}
/>
</div>
)}
<div className="flex h-full min-h-[300px] flex-col"> <div className="flex h-full min-h-[300px] flex-col">
{/* Compact stats bar */} {/* Compact stats bar */}
{compact ? ( {compact ? (