Added loading spinner

evg4b · Nov 11, 2024 · 124baba · 124baba
1 parent bd7ae19
commit 124baba
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 12 deletions.
diff --git a/src/content-script/extension.ts b/src/content-script/extension.ts
@@ -22,20 +22,31 @@ export const runExtension = async () => {
   const { rootContainer, rawContainer, formatContainer, queryContainer } = buildContainers(shadowRoot);
   rawContainer.appendChild(data);
 
+  const wrapper = async <T>(promise: Promise<T>): Promise<T> => {
+    rootContainer.classList.add('loading');
+    try {
+      return await promise;
+    } finally {
+      rootContainer.classList.remove('loading');
+    }
+  };
+
   const toolbox = new ToolboxElement();
   shadowRoot.appendChild(toolbox);
 
-  const response = await tokenize(data.innerText);
-
   toolbox.onQueryChanged(async query => {
-    const info = await jq(data.innerText, query);
-    if (info.type === 'error' && info.scope === 'jq') {
-      toolbox.setErrorMessage(info.error);
-      return;
-    }
+    await wrapper(
+      (async (query: string) => {
+        const info = await jq(data.innerText, query);
+        if (info.type === 'error' && info.scope === 'jq') {
+          toolbox.setErrorMessage(info.error);
+          return;
+        }
 
-    queryContainer.innerHTML = '';
-    queryContainer.appendChild(prepareResponse(info));
+        queryContainer.innerHTML = '';
+        queryContainer.appendChild(prepareResponse(info));
+      })(query)
+    );
   });
 
   toolbox.onTabChanged(tab => {
@@ -55,7 +66,7 @@ export const runExtension = async () => {
     }
   });
 
-  formatContainer.appendChild(prepareResponse(response));
+  await wrapper(tokenize(data.innerText).then(response => formatContainer.appendChild(prepareResponse(response))));
 };
 
 const prepareResponse = (response: TokenizerResponse): HTMLElement => {

diff --git a/src/content-script/styles.module.scss b/src/content-script/styles.module.scss
@@ -343,3 +343,30 @@ pre {
     }
   }
 }
+
+.loader {
+  display: none;
+}
+
+.loading .loader {
+  display: block;
+  width: 30px;
+  height: 30px;
+  position: fixed;
+  top: calc(50% - 15px);
+  left: calc(50% - 15px);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: 5px solid #3b3b3b; /* Light grey */
+  border-top: 5px solid #eeeeee; /* Blue */
+  animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/content-script/ui/containers.ts b/src/content-script/ui/containers.ts
@@ -1,6 +1,12 @@
+import { createElement } from '@core/dom';
+
 export const buildContainers = (root: ShadowRoot) => {
-  const rootContainer = document.createElement('div');
-  rootContainer.className = 'root-container';
+  const rootContainer = createElement({
+    element: 'div',
+    class: 'root-container',
+  });
+
+  rootContainer.appendChild(createElement({ element: 'div', class: 'loader' }));
 
   const formatContainer = document.createElement('div');
   formatContainer.className = 'formatted-json-container';