Defer heavy dashboard work in mobile app

Author: Muriel2Horak

custom_components/oig_cloud/www/js/core/core.js

@@ -36,7 +36,18 @@ function runWhenIdle(task, timeoutMs = 2000, fallbackDelayMs = 600) {
 function detectHaApp() {
     try {
         const ua = window.navigator?.userAgent || '';
-        return /Home Assistant/i.test(ua);
+        return /Home Assistant|HomeAssistant/i.test(ua);
+    } catch (e) {
+        return false;
+    }
+}
+
+function detectMobile() {
+    try {
+        const ua = window.navigator?.userAgent || '';
+        const mobileUA = /Android|iPhone|iPad|iPod|Mobile/i.test(ua);
+        const smallViewport = window.innerWidth <= 768 || window.matchMedia?.('(max-width: 768px)')?.matches;
+        return mobileUA || !!smallViewport;
     } catch (e) {
         return false;
     }
@@ -46,6 +57,9 @@ window.OIG_RUNTIME = window.OIG_RUNTIME || {};
 if (window.OIG_RUNTIME.isHaApp === undefined) {
     window.OIG_RUNTIME.isHaApp = detectHaApp();
 }
+if (window.OIG_RUNTIME.isMobile === undefined) {
+    window.OIG_RUNTIME.isMobile = detectMobile();
+}
 if (window.OIG_RUNTIME.initialLoadComplete === undefined) {
     window.OIG_RUNTIME.initialLoadComplete = false;
 }
@@ -321,6 +335,7 @@ var closeGridChargingDialog = window.DashboardGridCharging?.closeGridChargingDia
 // === INITIALIZATION ===
 function init() {
     console.log('[Dashboard] Initializing...');
+    const isConstrainedRuntime = !!(window.OIG_RUNTIME?.isHaApp || window.OIG_RUNTIME?.isMobile);
 
     // Detekovat a aplikovat téma z Home Assistantu
     detectAndApplyTheme();
@@ -369,16 +384,16 @@ function init() {
         const startHeavyLoad = () => {
             forceFullRefresh();
         };
-        if (window.OIG_RUNTIME?.isHaApp) {
-            setTimeout(() => runWhenIdle(startHeavyLoad, 2500, 900), 200);
+        if (isConstrainedRuntime) {
+            setTimeout(() => runWhenIdle(startHeavyLoad, 3500, 1200), 200);
         } else {
             startHeavyLoad();
         }
 
         updateTime();
 
         // NOVÉ: Load extended timeline for Today Plan Tile
-        runWhenIdle(buildExtendedTimeline, 2500, 900);
+        runWhenIdle(buildExtendedTimeline, isConstrainedRuntime ? 3500 : 2500, isConstrainedRuntime ? 1200 : 900);
 
         // OPRAVA: Načíst pricing data pokud je pricing tab aktivní při načtení stránky
         const pricingTab = document.getElementById('pricing-tab');
@@ -566,10 +581,18 @@ function init() {
     // Problém: Po restartu HA se někdy načítají CSS/HTML v jiném pořadí
     // Řešení: Opakované překreslení po různých intervalech
     // OPRAVA BUG #3: Inicializovat cache před prvním kreslením
-    setTimeout(() => { getNodeCenters(); drawConnections(); }, 100);   // První pokus po 100ms
-    setTimeout(() => { getNodeCenters(); drawConnections(); }, 500);   // Druhý pokus po 500ms
-    setTimeout(() => { getNodeCenters(); drawConnections(); }, 1000);  // Třetí pokus po 1s
-    setTimeout(() => { getNodeCenters(); drawConnections(); }, 2000);  // Finální po 2s
+    const scheduleConnectionsDraw = (delay) => {
+        setTimeout(() => { getNodeCenters(); drawConnections(); }, delay);
+    };
+    if (isConstrainedRuntime) {
+        scheduleConnectionsDraw(200);   // První pokus po 200ms (mobile/HA app)
+        scheduleConnectionsDraw(1200);  // Finální po 1.2s
+    } else {
+        scheduleConnectionsDraw(100);   // První pokus po 100ms
+        scheduleConnectionsDraw(500);   // Druhý pokus po 500ms
+        scheduleConnectionsDraw(1000);  // Třetí pokus po 1s
+        scheduleConnectionsDraw(2000);  // Finální po 2s
+    }
 
     // Mobile: Toggle node details on click (collapsed by default)
     if (window.innerWidth <= 768) {

custom_components/oig_cloud/www/js/features/flow.js

@@ -1150,9 +1150,10 @@ async function loadData() {
         return;
     }
     loadDataInProgress = true;
-    try {
     const runtime = window.OIG_RUNTIME || {};
-    const shouldYield = !!runtime.isHaApp && !runtime.initialLoadComplete;
+    try {
+    const isConstrainedRuntime = !!runtime.isHaApp || !!runtime.isMobile || window.innerWidth <= 768;
+    const shouldYield = isConstrainedRuntime && !runtime.initialLoadComplete;
     const yieldIfNeeded = async () => {
         if (!shouldYield) return;
         await new Promise(resolve => {
@@ -1415,6 +1416,7 @@ async function loadData() {
     }
 
     await updatePlannerModeBadge();
+    await yieldIfNeeded();
 
     // Aktualizovat boiler mode (ve flow diagramu), ale zachovat třídu mode-changing pokud existuje
     const boilerModeFlowData = await getSensorStringSafe(getSensorId('boiler_manual_mode'));
@@ -1562,7 +1564,11 @@ async function loadData() {
         const flowTab = document.querySelector('#flow-tab');
         const isFlowTabActive = flowTab && flowTab.classList.contains('active');
         if (isFlowTabActive) {
-            animateFlow(currentPowerValues);
+            if (isConstrainedRuntime && !runtime.initialLoadComplete) {
+                runtime.pendingFlowValues = currentPowerValues;
+            } else {
+                animateFlow(currentPowerValues);
+            }
         }
     }
 
@@ -1575,7 +1581,7 @@ async function loadData() {
     // Load details for all nodes (only on first load or explicit refresh)
     if (!previousValues['node-details-loaded']) {
         // Do not await heavy details on first render; it can freeze iOS WebView.
-        if (runtime.isHaApp && !runtime.initialLoadComplete) {
+        if ((runtime.isHaApp || runtime.isMobile || window.innerWidth <= 768) && !runtime.initialLoadComplete) {
             if (!runtime.nodeDetailsScheduled) {
                 runtime.nodeDetailsScheduled = true;
                 setTimeout(() => {
@@ -1618,6 +1624,16 @@ async function loadData() {
         if (window.OIG_RUNTIME) {
             window.OIG_RUNTIME.initialLoadComplete = true;
         }
+        if (runtime.pendingFlowValues && (runtime.isHaApp || runtime.isMobile || window.innerWidth <= 768)) {
+            const pendingValues = runtime.pendingFlowValues;
+            runtime.pendingFlowValues = null;
+            setTimeout(() => {
+                const flowTab = document.querySelector('#flow-tab');
+                if (flowTab && flowTab.classList.contains('active')) {
+                    animateFlow(pendingValues);
+                }
+            }, 400);
+        }
         if (loadDataPending) {
             loadDataPending = false;
             setTimeout(() => loadData(), 0);