fix: prevent devices limit flicker

frontend/src/lib/webapp/devicesLabels.js

@@ -6,19 +6,28 @@
  */
 export function devicesLimitLabel(devicesData, t, maxDevicesOverride) {
   const value = maxDevicesOverride !== undefined ? maxDevicesOverride : devicesData?.max_devices;
+  if (value === undefined || value === null || value === "") {
+    return t("wa_devices_limit_pending", {}, "...");
+  }
   const numeric = Number(value ?? 0);
   if (!Number.isFinite(numeric) || numeric <= 0) return t("wa_devices_unlimited");
   return String(Math.trunc(numeric));
 }
 
-export function devicesCountLabel(devicesData, t) {
+export function devicesCountLabel(devicesData, t, maxDevicesOverride) {
   const current = Number(devicesData?.current_devices ?? devicesData?.devices?.length ?? 0);
-  return t("wa_devices_count", { current, max: devicesLimitLabel(devicesData, t) });
+  return t("wa_devices_count", {
+    current,
+    max: devicesLimitLabel(devicesData, t, maxDevicesOverride),
+  });
 }
 
-export function devicesPercent(devicesData) {
+export function devicesPercent(devicesData, maxDevicesOverride) {
   const current = Number(devicesData?.current_devices ?? devicesData?.devices?.length ?? 0);
-  const max = Number(devicesData?.max_devices || 0);
+  const maxValue =
+    maxDevicesOverride !== undefined ? maxDevicesOverride : devicesData?.max_devices;
+  if (maxValue === undefined || maxValue === null || maxValue === "") return 0;
+  const max = Number(maxValue || 0);
   if (!max || max <= 0) return 100;
   return Math.max(0, Math.min(100, Math.round((current / max) * 100)));
 }

frontend/src/webapp/screens/DevicesScreen.svelte

@@ -33,6 +33,7 @@
     hideDevicesSummary &&
     !(devicesBusy && !devicesLoaded) &&
     (!devicesStatus || subscriptionNotActiveError);
+  $: effectiveMaxDevices = devicesData?.max_devices ?? subscription?.max_devices;
 </script>
 
 <main class="content with-nav">
@@ -42,7 +43,7 @@
         <Smartphone size={28} />
         <span>
           <strong>{t("wa_devices_title")}</strong>
-          <small>{devicesCountLabel(devicesData, t)}</small>
+          <small>{devicesCountLabel(devicesData, t, effectiveMaxDevices)}</small>
         </span>
         <Button
           variant="icon"
@@ -56,7 +57,7 @@
       </div>
       <LinearProgress
         class="devices-progress"
-        value={devicesPercent(devicesData)}
+        value={devicesPercent(devicesData, effectiveMaxDevices)}
         label={t("wa_devices_title")}
       />
       {#if Number(subscription?.extra_hwid_devices || 0) > 0 && subscription?.extra_hwid_devices_valid_until_text}
@@ -91,7 +92,11 @@
     <EmptyCard class="devices-empty-card">
       <Smartphone size={28} />
       <span>{t("wa_devices_empty")}</span>
-      <small>{t("wa_devices_empty_hint", { max: devicesLimitLabel(devicesData, t) })}</small>
+      <small>
+        {t("wa_devices_empty_hint", {
+          max: devicesLimitLabel(devicesData, t, effectiveMaxDevices),
+        })}
+      </small>
     </EmptyCard>
   {:else}
     <div class="devices-list">