ui: progressive table render + load timer, v1.3.34

console/ui/index.html

@@ -100,7 +100,7 @@
       <div class="nubes">NUBES</div>
       <div class="product">FISSION CONSOLE</div>
     </div>
-    <div style="font-size:0.65rem; color:var(--text-secondary); margin-left:10px; align-self:center; opacity:0.7;">v1.3.33</div>
+    <div style="font-size:0.65rem; color:var(--text-secondary); margin-left:10px; align-self:center; opacity:0.7;">v1.3.34</div>
   </div>
   <div class="row" style="margin:0;">
     <button class="btn ghost" onclick="reloadAll()">Refresh</button>
@@ -398,7 +398,7 @@
       </div>
 
       <div class="actions" style="justify-content:space-between; align-items:center;">
-        <span style="font-size:0.75rem; color:var(--text-secondary);">v1.3.33</span>
+        <span style="font-size:0.75rem; color:var(--text-secondary);">v1.3.34</span>
         <button class="btn ghost" onclick="closeHelp()">Закрыть</button>
       </div>
     </div>

console/ui/js/app.js

@@ -1,6 +1,12 @@
 /* app.js — основная логика: загрузка данных, таблица функций */
 
 async function reloadAll() {
+  const progress = startTimedStatus('Загрузка...', 'Загрузка данных', null);
+
+  // Показываем таблицу сразу с placeholder'ом
+  document.getElementById('fn-rows').innerHTML =
+    '<tr><td colspan="9" style="color:var(--text-secondary); font-style:italic;">⏳ Загружаем функции...</td></tr>';
+
   try {
     const [envs, pkgs, fns, http, times] = await Promise.all([
       getJSON(API_BASE + '/environments'),
@@ -23,7 +29,7 @@ async function reloadAll() {
       return t && t.spec && t.spec.functionref && t.spec.functionref.name;
     }).filter(Boolean)).size);
 
-    const rows = (fns || []).map(function (f) {
+    function makeFnRow(f) {
       const spec = f.spec || {};
       const meta = f.metadata || {};
       const ann = meta.annotations || {};
@@ -57,14 +63,33 @@ async function reloadAll() {
         '<td>' + cronCell + '</td>' +
         '<td class="nowrap">' + actions + '</td>' +
         '</tr>';
-    }).join('');
+    }
 
-    document.getElementById('fn-rows').innerHTML = rows || '<tr><td colspan="9">Нет функций</td></tr>';
-    if (!rows) {
+    var fnList = fns || [];
+    if (fnList.length === 0) {
+      progress.stop('Загружено: нет функций', '');
       document.getElementById('fn-rows').innerHTML = '<tr><td colspan="9">Нет функций</td></tr>';
+    } else {
+      // Рендерим первую строку сразу — убираем placeholder
+      var tbody = document.getElementById('fn-rows');
+      tbody.innerHTML = makeFnRow(fnList[0]);
+      // Остальные добавляем по одной с небольшой задержкой
+      var i = 1;
+      function appendNext() {
+        if (i >= fnList.length) {
+          progress.stop('Загружено ' + fnList.length + ' функций', 'ok');
+          return;
+        }
+        var tr = document.createElement('tbody');
+        tr.innerHTML = makeFnRow(fnList[i]);
+        tbody.appendChild(tr.firstChild);
+        i++;
+        setTimeout(appendNext, 40);
+      }
+      setTimeout(appendNext, 40);
     }
   } catch (e) {
     document.getElementById('fn-rows').innerHTML = '<tr><td colspan="9">Load error: ' + e.message + '</td></tr>';
-    showStatus('Ошибка загрузки: ' + e.message, 'err');
+    progress.stop('Ошибка загрузки: ' + e.message, 'err');
   }
 }