[PRAC/ret] Add logic to create "spinner"

Creating tbl-row with loading indicator (when Render-server "wakes up").

Worth noting:
  - thus improving the UX.. what's going on? the data is loading!

core: B-3 / JS-BL

Author: matowdev

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

@@ -0,0 +1,26 @@
+.crm__output-table-body-loading-row td {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: none;
+  height: 325px;
+}
+
+.spinner {
+  width: 90px;
+  height: 90px;
+  border: 15px solid var(--light-purple);
+  border-top-color: var(--main-purple);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

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

@@ -8,3 +8,4 @@
 @import url("modal-type.css");
 @import url("modal-delete.css");
 @import url("custom-tippy.css");
+@import url("spinner.css");

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

@@ -284,11 +284,24 @@
 
   async function addClientsDataToStorage() {
     try {
+      const tableBody = document.querySelector('.crm__output-table-body');
+      const spinnerRow = createLoadingSpinnerRow(); // создание спиннера
+      tableBody.append(spinnerRow); // добавление в таблицу
+
+      console.log('Ждём ответ от Render-сервера..');
+
+      // await new Promise((resolve) => setTimeout(resolve, 5000)); // искусственная задержка.. имитация "просыпания" Render-сервера
+
       // ! запрос на RENDER-сервер (а не на локальный, согласно маршрута.. ВНИМАНИЕ)
       const response = await fetch(
         'https://skillbus-crm.onrender.com/api/clients'
       );
 
+      // удаление спиннера после получения ответа/подгрузки клиентов
+      spinnerRow.remove();
+
+      console.log('Ответ получен! Данные должны быть отображены!');
+
       // проверка успешности/выполнения запроса
       if (!response.ok) {
         throw new Error(`Ошибка: ${response.status}!`);
@@ -302,6 +315,10 @@
       return data; // возврат массива данных
     } catch (error) {
       console.error('Ошибка загрузки списка клиентов с сервера!', error);
+
+      // удаление спиннера, если запрос завершился ошибкой
+      document.querySelector('.crm__output-table-body-loading-row')?.remove();
+
       return []; //  если ошибка возврат "пустого" массива
     }
   }
@@ -409,6 +426,21 @@
     return emptyTableTrRow;
   }
 
+  // ** создание строки с индикатором загрузки (спиннера.. для улучшения UX при "просыпании" Render-сервера)
+  function createLoadingSpinnerRow() {
+    const loadingTableTrRow = document.createElement('tr');
+    const loadingTableTdCell = document.createElement('td');
+
+    loadingTableTrRow.classList.add('crm__output-table-body-loading-row');
+
+    loadingTableTdCell.colSpan = 6; // объединение всех колонок
+    loadingTableTdCell.innerHTML = '<div class="spinner"></div>';
+    loadingTableTdCell.style.textAlign = 'center';
+    loadingTableTrRow.append(loadingTableTdCell);
+
+    return loadingTableTrRow;
+  }
+
   // ** создание элементов/строк таблицы данных о клиентах (заполнение ячеек)
   function createClientsTableTrRow(client = {}) {
     const clientTableTr = document.createElement('tr');