[PW-11.6/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/11-server-async-await/11-6-pw-11-server-async-await/students-db-client/css/spinner.css

@@ -0,0 +1,52 @@
+.dboard__table-body-loading-row td {
+  border-bottom: none;
+  height: 245px;
+}
+
+.spinner-wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 10px;
+}
+
+.spinner {
+  width: 90px;
+  height: 90px;
+  border: 15px solid var(--light-blue);
+  border-top-color: var(--specific-blue);
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner-text {
+  font-weight: var(--medium);
+  font-size: 17px;
+  color: var(--starry-night);
+}
+
+/* media queries, any-hover */
+
+@media (max-width: 320px) {
+  .spinner {
+    width: 50px;
+    height: 50px;
+    border: 10px solid var(--light-blue);
+    border-top-color: var(--specific-blue);
+  }
+
+  .spinner-text {
+    font-size: 13px;
+  }
+}

core-courses/3-js-basic-level/11-server-async-await/11-6-pw-11-server-async-await/students-db-client/css/style.css

@@ -5,3 +5,4 @@
 @import url("btn.css");
 @import url("table.css");
 @import url("custom-tippy.css");
+@import url("spinner.css");

core-courses/3-js-basic-level/11-server-async-await/11-6-pw-11-server-async-await/students-db-client/css/table.css

@@ -23,7 +23,8 @@
 
 .dboard__table .dboard__table-body-empty-row td {
   width: 100%;
-  /* height: 325px; */
+  height: 245px;
+  font-weight: var(--medium);
   font-size: 17px;
   color: var(--bootstrap-red);
   text-align: center;

core-courses/3-js-basic-level/11-server-async-await/11-6-pw-11-server-async-await/students-db-client/js/index.js

@@ -681,6 +681,26 @@
     return emptyTableTrRow;
   }
 
+  // ** создание строки с индикатором загрузки (спиннера.. для улучшения UX при "просыпании" Render-сервера)
+  function createLoadingSpinnerRow() {
+    const loadingTableTrRow = document.createElement('tr');
+    const loadingTableTdCell = document.createElement('td');
+
+    loadingTableTrRow.classList.add('dboard__table-body-loading-row');
+
+    loadingTableTdCell.colSpan = 5; // объединение всех колонок
+    loadingTableTdCell.innerHTML = `
+      <div class="spinner-wrap">
+      <div class="spinner"></div>
+      <span class="spinner-text">Идёт загрузка данных.. подождите! 10.. 30.. 50 секунд!</span>
+      </div>
+      `;
+    loadingTableTdCell.style.textAlign = 'center';
+    loadingTableTrRow.append(loadingTableTdCell);
+
+    return loadingTableTrRow;
+  }
+
   // TODO: что бы перейти на "полностью" [СЕРВЕРНУЮ] логику/обратно.. нужно пошагово просмотреть весь файл и раскомментировать закомментированный код, при этом комментируя/удаляя код/строки помеченные, как [FOR DEMO - sessionStorage] в полном объёме (т.е. некоторые инициализации переменных, доп. функций проводились каждой логике свои)
 
   // ** [СЕРВЕР] организация запроса, получение данных/списка студентов с сервера (корректировка входящих данных)
@@ -728,10 +748,9 @@
 
   async function addStudentsDataToStorage() {
     try {
-      // ??
-      // const tableBody = document.querySelector('.dboard__table-body');
-      // const spinnerRow = createLoadingSpinnerRow(); // создание спиннера
-      // tableBody.append(spinnerRow); // добавление в таблицу
+      const tableBody = document.querySelector('.dboard__table-body'); // фиксация тела таблицы
+      const spinnerRow = createLoadingSpinnerRow(); // создание спиннера
+      tableBody.append(spinnerRow); // добавление в таблицу
 
       console.log('Ждём ответ от Render-сервера..');
 
@@ -744,17 +763,16 @@
         'https://students-dashboard-crm.onrender.com/api/students'
       );
 
-      // ??
       // удаление спиннера после получения ответа/подгрузки студентов
-      // spinnerRow.remove();
-
-      console.log('Ответ получен! Данные должны быть отображены!');
+      spinnerRow.remove();
 
       // проверка успешности/выполнения запроса
       if (!response.ok) {
         throw new Error(`Ошибка: ${response.status}!`);
       }
 
+      console.log('Ответ получен! Данные должны быть отображены!');
+
       const data = await response.json(); // преобразование данных в JSON-формат
       sessionStorage.setItem('demoStudents', JSON.stringify(data)); // добавление/сохранение в Session storage
 
@@ -764,9 +782,8 @@
     } catch (error) {
       console.error('Ошибка загрузки списка студентов с сервера!', error);
 
-      // ??
       // удаление спиннера, если запрос завершился ошибкой
-      // document.querySelector('.dboard__table-body-loading-row')?.remove();
+      document.querySelector('.dboard__table-body-loading-row')?.remove();
 
       return []; //  если ошибка, возврат "пустого" массива
     }