Keep cards rendered with stale data on transient backend errors

Author: eetu

frontend/src/components/FmiWeatherBox.tsx

@@ -90,7 +90,7 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
     );
   }
 
-  if (error) {
+  if (error && !data) {
     return (
       <Box className={className}>
         <OfflineState label="säätiedot" />
@@ -102,6 +102,8 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
     return null;
   }
 
+  const isStale = !!error;
+
   // Aggregate hourly PV forecast points to per-day kWh + hour count.
   // Days with partial coverage (e.g. first/last day of the 66h window) are
   // dropped from the chart to avoid showing misleading near-zero totals.
@@ -188,6 +190,14 @@ const WeatherBox: React.FC<WeatherBoxProps> = ({ className }) => {
           >
             {demo ? "" : (location?.displayName ?? "")}
           </span>
+          {isStale && (
+            <Icon
+              size={14}
+              css={{ color: theme.colors.text.muted, opacity: 0.7 }}
+            >
+              cloud_off
+            </Icon>
+          )}
         </div>
         <div
           css={{

frontend/src/components/SolisBox.tsx

@@ -29,8 +29,12 @@ const SolisBox: React.FC<SolisBoxProps> = ({ className }) => {
   // Not configured: hide entirely.
   if (error?.status === 503) return null;
 
-  const offline = !!error || data?.status === 2;
-  if (offline) {
+  // Full offline state when:
+  // - inverter reports offline (status=2)
+  // - network error and we have nothing cached to render
+  const inverterOffline = data?.status === 2;
+  const networkErrorNoData = !!error && !data;
+  if (inverterOffline || networkErrorNoData) {
     const lastSeen = data?.updated_at ? new Date(data.updated_at) : null;
     return (
       <Box className={className}>
@@ -41,6 +45,8 @@ const SolisBox: React.FC<SolisBoxProps> = ({ className }) => {
 
   if (!data) return null;
 
+  const isStale = !!error;
+
   const isAlarm = data.status === 3;
   const displayPower = data.power.toFixed(1);
 
@@ -142,6 +148,11 @@ const SolisBox: React.FC<SolisBoxProps> = ({ className }) => {
               {isAlarm ? "warning" : "solar_power"}
             </Icon>
             {data.power_unit}
+            {isStale && (
+              <Icon size={14} css={{ opacity: 0.6 }}>
+                cloud_off
+              </Icon>
+            )}
           </div>
           <div
             css={{

frontend/src/components/TemperatureBox.tsx

@@ -56,7 +56,11 @@ const TemperatureBox: React.FC<TemperatureBoxProps> = ({
       null,
     );
 
-  if (error) {
+  // Full offline UI only when we have no prior data to fall back on.
+  // With cached sensors, render the normal card and surface a subtle stale
+  // hint instead — avoids flashing offline state during standby reconnects.
+  const isStale = !!error && sensors.length > 0;
+  if (error && sensors.length === 0) {
     return (
       <Box
         className={classNames(className)}
@@ -212,12 +216,20 @@ const TemperatureBox: React.FC<TemperatureBoxProps> = ({
         >
           <div
             css={{
+              display: "inline-flex",
+              alignItems: "center",
+              gap: 6,
               ...theme.typography.label,
               color: theme.colors.text.muted,
               letterSpacing: "0.04em",
             }}
           >
             {title}
+            {isStale && (
+              <Icon size={14} css={{ opacity: 0.6 }}>
+                cloud_off
+              </Icon>
+            )}
           </div>
           <div
             css={{