spinner and kbd tip

Author: floesche

index.html

@@ -79,6 +79,15 @@ <h2>Getting Started</h2>
           </p>
         </div>
 
+        <div class="note">
+          <p>
+            <strong>Keyboard Navigation:</strong> When a cell type dropdown is open, you can quickly navigate to 
+            specific entries by typing on your keyboard. For example, instead of scrolling through thousands of 
+            cell types, simply type <kbd>V</kbd><kbd>S</kbd> to jump directly to cell types starting with "VS". 
+            This works with any letter combination to help you find what you're looking for faster.
+          </p>
+        </div>
+
         <div class="note">
           <p>
             <strong>Display Recommendation:</strong> neuDiff works best on wide monitors where you can view

scripts/main.js

@@ -360,6 +360,27 @@ document.addEventListener("DOMContentLoaded", () => {
 
     const welcomeScreen = document.getElementById("welcome-screen");
 
+    // Get neuron select wrapper for loading spinner
+    const neuronSelectWrapper = neuronSelect.closest(".selector");
+
+    // Helper functions for loading state
+    const setLoadingState = (isLoading) => {
+      // Disable all dropdowns
+      const allSelects = document.querySelectorAll(".viewer-controls select");
+      allSelects.forEach((select) => {
+        select.disabled = isLoading;
+      });
+
+      // Show/hide spinner on neuron select
+      if (neuronSelectWrapper) {
+        if (isLoading) {
+          neuronSelectWrapper.classList.add("is-loading");
+        } else {
+          neuronSelectWrapper.classList.remove("is-loading");
+        }
+      }
+    };
+
     const hidePreviewPane = () => {
       frame.src = "about:blank";
       previewPane.classList.add("is-hidden");
@@ -484,6 +505,9 @@ document.addEventListener("DOMContentLoaded", () => {
           const selectedBase = matchingOption.value.trim();
           const loadToken = ++currentLoadToken;
 
+          // Enable loading state
+          setLoadingState(true);
+
           fetchDatasetData(selectedBase)
             .then((data) => {
               if (loadToken !== currentLoadToken) return;
@@ -540,11 +564,25 @@ document.addEventListener("DOMContentLoaded", () => {
 
               isRestoringFromURL = false;
               updateURL();
+
+              // Disable loading state after DOM updates complete
+              requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                  setLoadingState(false);
+                });
+              });
             })
             .catch((error) => {
               console.error(error);
               isRestoringFromURL = false;
               updateURL();
+
+              // Disable loading state after DOM updates complete
+              requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                  setLoadingState(false);
+                });
+              });
             });
         } else {
           isRestoringFromURL = false;
@@ -569,6 +607,9 @@ document.addEventListener("DOMContentLoaded", () => {
 
       const loadToken = currentLoadToken;
 
+      // Enable loading state
+      setLoadingState(true);
+
       fetchDatasetData(selectedBase)
         .then((data) => {
           if (loadToken !== currentLoadToken) return;
@@ -582,6 +623,13 @@ document.addEventListener("DOMContentLoaded", () => {
           state.neuronIndex = buildNeuronIndex(state.neuronData);
           populateNeuronOptions();
           updateURL();
+
+          // Disable loading state after DOM updates complete
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              setLoadingState(false);
+            });
+          });
         })
         .catch((error) => {
           console.error(error);
@@ -594,6 +642,13 @@ document.addEventListener("DOMContentLoaded", () => {
           hidePreviewPane();
           checkIfBothViewersEmpty();
           updateURL();
+
+          // Disable loading state after DOM updates complete
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              setLoadingState(false);
+            });
+          });
         });
     });
 

styles/main.css

@@ -297,6 +297,7 @@ body {
 }
 
 .selector {
+    position: relative;
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
@@ -320,6 +321,28 @@ body {
     background-color: rgba(20, 30, 50, 0.7);
 }
 
+.selector.is-loading::after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    right: 0.75rem;
+    width: 1rem;
+    height: 1rem;
+    margin-top: 0.125rem;
+    border: 2px solid rgba(120, 180, 255, 0.3);
+    border-top-color: rgba(120, 180, 255, 0.9);
+    border-radius: 50%;
+    animation: spinner-rotate 0.6s linear infinite;
+    pointer-events: none;
+    z-index: 10;
+}
+
+@keyframes spinner-rotate {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 main.viewer-split {
     flex: 1 1 0;
     display: grid;
@@ -455,6 +478,20 @@ main.viewer-split {
     color: rgba(247, 251, 255, 0.85);
 }
 
+.welcome-content kbd {
+    display: inline-block;
+    padding: 0.15rem 0.4rem;
+    font-size: 0.875em;
+    font-family: monospace;
+    line-height: 1;
+    color: rgba(247, 251, 255, 0.95);
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 0.25rem;
+    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2);
+    margin: 0 0.1rem;
+}
+
 @media (max-width: 960px) {
     .viewer-header {
         flex-wrap: wrap;