static/index.html

@@ -46,6 +46,11 @@
               </form>
             </div>
             <div class="col-lg">
+              <div id="loaderWrapper" class="d-none">
+                <div class="spinner-border text-primary" role="status">
+                  <span class="visually-hidden">Загрузка...</span>
+                </div>
+              </div>
               <img src="none.png" alt="Результат" id="imgslot" class="w-100" />
               <div id="queriesResult"></div>
             </div>

static/site.js

@@ -27,15 +27,25 @@ const processAnalyzeResult = (data) => {
     for (const [query, result] of Object.entries(data.data.response)) {
       queriesResult.innerHTML += renderResultMarkup(query, result);
     }
+  } else if (data.data && data.data.error) {
+    queriesResult.innerHTML = `<div class="alert alert-danger">${JSON.stringify(data.data.error)}</div>`;
   }
 };
 
 const handleFormSubmit = (event) => {
   event.preventDefault();
   const data = new FormData(event.target);
+  const loaderWrapper = document.getElementById('loaderWrapper');
+  loaderWrapper.classList.remove('d-none');
   fetch('/analyze', { method: 'POST', body: data })
     .then((res) => res.json())
-    .then(processAnalyzeResult);
+    .then(processAnalyzeResult)
+    .catch(() => {
+      alert('Произошла внутренняя ошибка.');
+    })
+    .finally(() => {
+      loaderWrapper.classList.add('d-none');
+    });
 };
 
 document.addEventListener('DOMContentLoaded', () => {

static/style.css

@@ -0,0 +1,11 @@
+#loaderWrapper {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #33333333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}