спиннер загрузки с сервера

api/static/css/layout.css

@@ -3,3 +3,31 @@ body {
     background-repeat: repeat;
     background-size: 512px auto;
 }
+
+.loader-bg {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+
+  /* светлый фон */
+  background: rgba(255, 255, 255, 0.85);
+
+  /* мягкая тень = эффект размытия краёв */
+  box-shadow:
+    0 0 0 8px rgba(255, 255, 255, 0.35),
+    0 0 20px rgba(0, 0, 0, 0.08);
+
+  /* чуть сглаживаем */
+  backdrop-filter: blur(2px);
+}
+
+/* плавное появление */
+#globalLoader {
+  transition: opacity .15s ease-in-out;
+}
+#globalLoader.d-none {
+  opacity: 0;
+}
+#globalLoader:not(.d-none) {
+  opacity: 1;
+}

api/static/js/api.js

@@ -1,4 +1,23 @@
 // api.js
+let loaderTimeout = null;
+
+function showLoader() {
+  const loader = document.getElementById('globalLoader');
+  if (!loader) return;
+
+  clearTimeout(loaderTimeout);
+  loader.classList.remove('d-none');
+}
+
+function hideLoader() {
+  const loader = document.getElementById('globalLoader');
+  if (!loader) return;
+
+  loaderTimeout = setTimeout(() => {
+    loader.classList.add('d-none');
+  }, 200); // задержка 0.2 сек
+}
+
 export async function apiRequest(url, payload = {}, method = 'POST') {
   method = method.toUpperCase();
 
@@ -12,21 +31,25 @@ export async function apiRequest(url, payload = {}, method = 'POST') {
     credentials: 'same-origin'
   };
 
-  // --- Если GET → добавляем payload в URL ---
   if (method === 'GET') {
     const params = new URLSearchParams(payload);
     finalUrl = `${url}?${params.toString()}`;
   } else {
-    // --- Для остальных методов → отправляем body ---
     options.body = JSON.stringify(payload);
   }
 
-  const res = await fetch(finalUrl, options);
+  showLoader();
 
-  if (!res.ok) {
-    const text = await res.text();
-    throw new Error(`HTTP ${res.status}: ${text}`);
+  try {
+    const res = await fetch(finalUrl, options);
+
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(`HTTP ${res.status}: ${text}`);
+    }
+
+    return await res.json();
+  } finally {
+    hideLoader();
   }
-
-  return res.json();
 }