Fix spinner location and handle errors better. (#269)

hlxsites · Sep 4, 2024 · 9b4c967 · 9b4c967
1 parent b2e1ceb
commit 9b4c967
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 4 deletions.
diff --git a/blocks/agent-search/agent-search.css b/blocks/agent-search/agent-search.css
@@ -9,6 +9,11 @@ main .section.agent-search-container {
   position: relative;
 }
 
+.agent-search.block .loading-spinner {
+  position: fixed;
+  top: var(--nav-height);
+}
+
 .agent-search.block .search-bar-wrapper {
   position: relative;
   width: 100%;

diff --git a/blocks/agent-search/agent-search.js b/blocks/agent-search/agent-search.js
@@ -46,6 +46,7 @@ const search = async () => {
 };
 
 const updateSearch = async (callback) => {
+  document.querySelector('body').classList.add('no-scroll');
   const block = document.querySelector('.agent-search.block');
   const spinner = getSpinner();
   block.append(spinner);
@@ -78,6 +79,7 @@ const updateSearch = async (callback) => {
 
   block.querySelector(RESULTS_SELECTOR).replaceWith(buildResults(agents.value));
   spinner.remove();
+  document.querySelector('body').classList.remove('no-scroll');
   wrapper.scrollIntoView({ behavior: 'smooth' });
 };
 

diff --git a/blocks/agent-search/builders/results.js b/blocks/agent-search/builders/results.js
@@ -69,7 +69,7 @@ export const buildResults = (list) => {
   results.append(ul);
 
   ul.classList.add('agent-list');
-  list.forEach((agent) => ul.append(buildCard(agent)));
+  list?.forEach((agent) => ul.append(buildCard(agent)));
 
   return results;
 };
diff --git a/scripts/apis/agent/workers/search.js b/scripts/apis/agent/workers/search.js
@@ -5,12 +5,16 @@
  * @param {string} event.data.url the URL to fetch.
  *
  */
-onmessage = (event) => {
-  fetch(event.data.url).then(async (resp) => {
+onmessage = async (event) => {
+  try {
+    const resp = await fetch(event.data.url);
     if (resp.ok) {
       postMessage(await resp.json());
     } else {
       postMessage({});
     }
-  });
+  } catch (e) {
+    console.log('Error fetching data', e);
+    postMessage({});
+  }
 };