Defer heavy city card rendering until users need it

City decision cards rendered Chart.js canvases and AI evidence bodies before the user could see or expand those sections. This keeps the card shell visible while delaying chart data/canvas work until the section nears the viewport and skipping the AI evidence body while its details panel is collapsed.

Constraint: Preserve existing decision-card layout and evidence copy.

Rejected: Add list virtualization in the same pass | card-level render costs should be reduced before changing list mechanics.

Confidence: high

Scope-risk: narrow

Reversibility: clean

Tested: npm run build

Not-tested: Runtime scroll benchmark on a large production city set.

frontend/components/dashboard/ScanTerminal.module.css

@@ -3778,6 +3778,18 @@
   height: 100% !important;
 }
 
+.root :global(.scan-ai-city-chart-placeholder) {
+  display: grid;
+  height: 100%;
+  place-items: center;
+  border: 1px dashed rgba(77, 163, 255, 0.22);
+  border-radius: 14px;
+  background: rgba(11, 18, 32, 0.35);
+  color: #7f96b6;
+  font-size: 12px;
+  font-weight: 800;
+}
+
 .root :global(.scan-ai-city-chart-legend) {
   display: flex;
   gap: 14px;
@@ -5818,6 +5830,12 @@
   color: #64748b;
 }
 
+.root :global(.scan-terminal.light .scan-ai-city-chart-placeholder) {
+  border-color: #cbd5e1;
+  background: #f8fafc;
+  color: #64748b;
+}
+
 .root :global(.scan-terminal.light .scan-ai-log-panel) {
   border-color: rgba(35, 72, 118, 0.12);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(246, 250, 255, 0.9));

frontend/components/dashboard/scan-terminal/AiCityTemperatureChart.tsx

@@ -1,5 +1,5 @@
 import type { ChartConfiguration } from "chart.js";
-import { useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { BarChart3 } from "lucide-react";
 import type { CityDetail } from "@/lib/dashboard-types";
 import { useChart } from "@/hooks/useChart";
@@ -63,11 +63,16 @@ function buildTemperatureChartSignature(detail: CityDetail) {
 
 export function AiCityTemperatureChart({ detail }: { detail: CityDetail }) {
   const { locale } = useI18n();
+  const sectionRef = useRef<HTMLElement | null>(null);
+  const [shouldRenderChart, setShouldRenderChart] = useState(false);
   const cityKey = `${detail.name || detail.display_name || ""}:${detail.local_date || ""}`;
-  const chartSignature = useMemo(() => buildTemperatureChartSignature(detail), [detail]);
+  const chartSignature = useMemo(
+    () => (shouldRenderChart ? buildTemperatureChartSignature(detail) : ""),
+    [detail, shouldRenderChart],
+  );
   const computedChartData = useMemo(
-    () => getTemperatureChartData(detail, locale),
-    [chartSignature, locale],
+    () => (shouldRenderChart ? getTemperatureChartData(detail, locale) : null),
+    [chartSignature, detail, locale, shouldRenderChart],
   );
   const lastChartDataRef = useRef<{
     cityKey: string;
@@ -183,14 +188,40 @@ export function AiCityTemperatureChart({ detail }: { detail: CityDetail }) {
     } satisfies ChartConfiguration<"line">;
   }, [chartData, detail.temp_symbol, forecastLabel, observationLabel]);
 
+  useEffect(() => {
+    if (shouldRenderChart) return;
+    if (typeof window === "undefined" || !("IntersectionObserver" in window)) {
+      setShouldRenderChart(true);
+      return;
+    }
+    const target = sectionRef.current;
+    if (!target) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (!entries.some((entry) => entry.isIntersecting)) return;
+        setShouldRenderChart(true);
+        observer.disconnect();
+      },
+      { rootMargin: "220px 0px" },
+    );
+    observer.observe(target);
+    return () => observer.disconnect();
+  }, [shouldRenderChart]);
+
   return (
-    <section className="scan-ai-city-section chart">
+    <section className="scan-ai-city-section chart" ref={sectionRef}>
       <div className="scan-ai-city-section-title">
         <BarChart3 size={15} />
         <span>{locale === "en-US" ? "Evidence · intraday path" : "证据 · 今日日内路径"}</span>
       </div>
       <div className="scan-ai-city-chart">
-        <canvas ref={canvasRef} />
+        {shouldRenderChart ? (
+          <canvas ref={canvasRef} />
+        ) : (
+          <div className="scan-ai-city-chart-placeholder">
+            {locale === "en-US" ? "Chart will render when visible" : "图表进入视口后再渲染"}
+          </div>
+        )}
       </div>
       {chartData ? (
         <div className="scan-ai-city-chart-legend">

frontend/components/dashboard/scan-terminal/AiEvidencePanel.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import type {
   AiCityForecastPayload,
   AiCityForecastState,
@@ -36,8 +37,18 @@ export function AiEvidencePanel({
   localizedFinalJudgment: string;
   rawObservationText: string;
 }) {
+  const [isOpen, setIsOpen] = useState(() => !isCompactCard);
+
+  useEffect(() => {
+    setIsOpen(!isCompactCard);
+  }, [isCompactCard]);
+
   return (
-    <details className="scan-ai-city-section scan-ai-city-ai-read" open={!isCompactCard}>
+    <details
+      className="scan-ai-city-section scan-ai-city-ai-read"
+      open={isOpen}
+      onToggle={(event) => setIsOpen(event.currentTarget.open)}
+    >
       <summary className="scan-ai-city-section-title">
         {isHkoObservation
           ? isEn
@@ -47,69 +58,71 @@ export function AiEvidencePanel({
             ? "Evidence · AI airport read"
             : "证据 · AI 机场报文解读"}
       </summary>
-      <div className="scan-ai-city-section-body">
-        {aiForecast.status === "loading" ? (
-          <>
-            <p className="scan-ai-weather-summary">{aiReadInProgressText}</p>
-            {localizedFinalJudgment || aiForecast.streamText ? (
+      {isOpen ? (
+        <div className="scan-ai-city-section-body">
+          {aiForecast.status === "loading" ? (
+            <>
+              <p className="scan-ai-weather-summary">{aiReadInProgressText}</p>
+              {localizedFinalJudgment || aiForecast.streamText ? (
+                <p className="scan-ai-city-muted">
+                  {localizedFinalJudgment || aiForecast.streamText}
+                </p>
+              ) : null}
               <p className="scan-ai-city-muted">
-                {localizedFinalJudgment || aiForecast.streamText}
+                {isEn
+                  ? isHkoObservation
+                    ? "Rule evidence is shown first; the full HKO AI read will merge automatically."
+                    : "Rule evidence is shown first; the full airport AI read will merge automatically."
+                  : isHkoObservation
+                    ? "先展示规则证据，完整香港天文台 AI 解读返回后会自动合并。"
+                    : "先展示规则证据，完整机场 AI 解读返回后会自动合并。"}
               </p>
-            ) : null}
-            <p className="scan-ai-city-muted">
+            </>
+          ) : aiForecast.status === "ready" && aiCityForecast ? (
+            <>
+              <p className="scan-ai-weather-summary">
+                {aiRuleEvidenceMode ? aiRuleEvidenceText : aiReadCompleteText}
+              </p>
+              <ul className="scan-ai-weather-bullets">
+                {[localizedFinalJudgment, ...aiBullets]
+                  .filter((line) => String(line || "").trim())
+                  .map((line, index) => (
+                    <li key={`${line}-${index}`}>{line}</li>
+                  ))}
+              </ul>
+              <p className="scan-ai-raw-metar">{rawObservationText}</p>
+            </>
+          ) : aiForecast.status === "ready" ? (
+            <>
+              <p className="scan-ai-weather-summary">{aiRuleEvidenceText}</p>
+              <ul className="scan-ai-weather-bullets">
+                {fallbackAiReason ? <li>{fallbackAiReason}</li> : null}
+                <li>{localModelSupportNote}</li>
+                <li>{rawObservationText}</li>
+              </ul>
+            </>
+          ) : aiForecast.status === "failed" ? (
+            <>
+              <p className="scan-ai-weather-summary">{aiRuleEvidenceText}</p>
+              <ul className="scan-ai-weather-bullets">
+                {aiForecast.error ? <li>{aiForecast.error}</li> : null}
+                <li>{localModelSupportNote}</li>
+                <li>{rawObservationText}</li>
+              </ul>
+            </>
+          ) : (
+            <p>
               {isEn
                 ? isHkoObservation
-                  ? "Rule evidence is shown first; the full HKO AI read will merge automatically."
-                  : "Rule evidence is shown first; the full airport AI read will merge automatically."
+                  ? "Waiting for AI to read the latest HKO observation."
+                  : "Waiting for AI to read the latest airport bulletin."
                 : isHkoObservation
-                  ? "先展示规则证据，完整香港天文台 AI 解读返回后会自动合并。"
-                  : "先展示规则证据，完整机场 AI 解读返回后会自动合并。"}
+                  ? "等待 AI 解读最新香港天文台观测。"
+                  : "等待 AI 解读最新机场报文。"}
             </p>
-          </>
-        ) : aiForecast.status === "ready" && aiCityForecast ? (
-          <>
-            <p className="scan-ai-weather-summary">
-              {aiRuleEvidenceMode ? aiRuleEvidenceText : aiReadCompleteText}
-            </p>
-            <ul className="scan-ai-weather-bullets">
-              {[localizedFinalJudgment, ...aiBullets]
-                .filter((line) => String(line || "").trim())
-                .map((line, index) => (
-                  <li key={`${line}-${index}`}>{line}</li>
-                ))}
-            </ul>
-            <p className="scan-ai-raw-metar">{rawObservationText}</p>
-          </>
-        ) : aiForecast.status === "ready" ? (
-          <>
-            <p className="scan-ai-weather-summary">{aiRuleEvidenceText}</p>
-            <ul className="scan-ai-weather-bullets">
-              {fallbackAiReason ? <li>{fallbackAiReason}</li> : null}
-              <li>{localModelSupportNote}</li>
-              <li>{rawObservationText}</li>
-            </ul>
-          </>
-        ) : aiForecast.status === "failed" ? (
-          <>
-            <p className="scan-ai-weather-summary">{aiRuleEvidenceText}</p>
-            <ul className="scan-ai-weather-bullets">
-              {aiForecast.error ? <li>{aiForecast.error}</li> : null}
-              <li>{localModelSupportNote}</li>
-              <li>{rawObservationText}</li>
-            </ul>
-          </>
-        ) : (
-          <p>
-            {isEn
-              ? isHkoObservation
-                ? "Waiting for AI to read the latest HKO observation."
-                : "Waiting for AI to read the latest airport bulletin."
-              : isHkoObservation
-                ? "等待 AI 解读最新香港天文台观测。"
-                : "等待 AI 解读最新机场报文。"}
-          </p>
-        )}
-      </div>
+          )}
+        </div>
+      ) : null}
     </details>
   );
 }