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

Add for "spinner" wrap, text (for more information).

core: B-3 / JS-BL

Author: matowdev

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

@@ -1,9 +1,14 @@
 .crm__output-table-body-loading-row td {
+  border-bottom: none;
+  height: 325px;
+}
+
+.spinner-wrap {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  border-bottom: none;
-  height: 325px;
+  row-gap: 10px;
 }
 
 .spinner {
@@ -24,3 +29,23 @@
     transform: rotate(360deg);
   }
 }
+
+.spinner-text {
+  font-size: 16px;
+  color: var(--text-gray);
+}
+
+/* media queries, any-hover */
+
+@media (max-width: 320px) {
+  .spinner {
+    width: 50px;
+    height: 50px;
+    border: 10px solid var(--light-purple);
+    border-top-color: var(--main-purple);
+  }
+
+  .spinner-text {
+    font-size: 13px;
+  }
+}

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

@@ -434,7 +434,12 @@
     loadingTableTrRow.classList.add('crm__output-table-body-loading-row');
 
     loadingTableTdCell.colSpan = 6; // объединение всех колонок
-    loadingTableTdCell.innerHTML = '<div class="spinner"></div>';
+    loadingTableTdCell.innerHTML = `
+    <div class="spinner-wrap">
+    <div class="spinner"></div>
+    <span class="spinner-text">Идёт загрузка данных.. подождите!</span>
+    </div>
+    `;
     loadingTableTdCell.style.textAlign = 'center';
     loadingTableTrRow.append(loadingTableTdCell);