[PRAC/ret] Correct logic of "empty" tbl row

Organiz universal/work, different text msg's (styling by CSS).

Worth noting:
  - thus improving the UX.

core: B-3 / JS-BL

Author: matowdev

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/css/crm-output.css

@@ -88,14 +88,13 @@
   cursor: pointer;
 }
 
-.crm__output-table-body-empty-row {
-  width: 100%;
-  height: 65px;
-  text-align: center;
-}
-
 .crm__output-table-body-empty-row td {
+  border-bottom: none;
   width: 100%;
+  height: 325px;
+  font-weight: var(--medium);
+  font-size: 17px;
+  color: var(--bootstrap-red);
   text-align: center;
 }
 
@@ -456,6 +455,10 @@
     font-size: 13px;
   }
 
+  .crm__output-table-body-empty-row td {
+    font-size: 13px;
+  }
+
   .crm__output-table-body-cell_id {
     font-size: 13px;
   }

core-courses/3-js-basic-level/practicum-js-basic-level/sb-crm-client/js/index.js

@@ -258,12 +258,12 @@
   //       if (clientsDataArrWithIds.length > 0) {
   //         addClientsToTable(clientsDataArrWithIds); // отрисовка данных, наполнение таблицы клиентов
   //       } else {
-  //         outTableBody.append(createEmptyTableMessageRow()); // если данных нет, вывод/добавление строки-сообщения
+  //         outTableBody.append(createEmptyTableMessageRow('Нет данных! Запустите/перезапустите сервер!')); // если данных нет, вывод/добавление строки-сообщения
   //       }
   //     } catch (error) {
   //       console.error('Не удалось загрузить список клиентов..', error);
   //       outTableBody.innerHTML = ''; // очистка таблицы
-  //       outTableBody.append(createEmptyTableMessageRow()); // если ошибка, вывод/добавление строки-сообщения
+  //       outTableBody.append(createEmptyTableMessageRow('Нет данных! Запустите/перезапустите сервер!')); // если ошибка, вывод/добавление строки-сообщения
   //     }
   //   }
   //
@@ -337,7 +337,11 @@
     if (updateClientsDataArr.length > 0) {
       addClientsToTable(updateClientsDataArr); // отрисовка данных, наполнение таблицы клиентов
     } else {
-      outTableBody.append(createEmptyTableMessageRow()); // если ошибка, вывод/добавление строки-сообщения
+      outTableBody.append(
+        createEmptyTableMessageRow(
+          'Нет данных! Запустите/перезапустите сервер!'
+        )
+      ); // если ошибка, вывод/добавление строки-сообщения
     }
   }
 
@@ -408,19 +412,16 @@
   }
 
   // ** создание "пустой" строки для таблицы клиентов (при/для фильтрации, пустом массиве)
-  function createEmptyTableMessageRow() {
+  function createEmptyTableMessageRow(
+    message = 'Пусто.. измените фильтрацию, добавьте студента!?'
+  ) {
     const emptyTableTrRow = document.createElement('tr');
     const emptyTableTdCell = document.createElement('td');
 
     emptyTableTrRow.classList.add('crm__output-table-body-empty-row');
 
     emptyTableTdCell.colSpan = 6; // объединение всех колонок
-    emptyTableTdCell.textContent =
-      'Пусто.. измените фильтрацию, добавьте клиента!? Запустите сервер?';
-    emptyTableTdCell.style.fontWeight = '500';
-    emptyTableTdCell.style.fontSize = '16px';
-    emptyTableTdCell.style.color = '#dc3545';
-    emptyTableTdCell.style.textAlign = 'center';
+    emptyTableTdCell.textContent = message;
     emptyTableTrRow.append(emptyTableTdCell);
 
     return emptyTableTrRow;
@@ -437,7 +438,7 @@
     loadingTableTdCell.innerHTML = `
     <div class="spinner-wrap">
     <div class="spinner"></div>
-    <span class="spinner-text">Идёт загрузка данных.. подождите!</span>
+    <span class="spinner-text">Идёт загрузка данных.. подождите! 10.. 30.. 50 секунд!</span>
     </div>
     `;
     loadingTableTdCell.style.textAlign = 'center';