Make colorizeUmap async to show spinner before heavy Plotly operations

Co-authored-by: lstein <111189+lstein@users.noreply.github.com>

Author: Copilot

photomap/frontend/static/javascript/umap.js

@@ -238,14 +238,14 @@ export async function fetchUmapData() {
       scrollZoom: true,
     };
 
-    Plotly.newPlot("umapPlot", [allPointsTrace, currentImageTrace], layout, config).then((gd) => {
+    Plotly.newPlot("umapPlot", [allPointsTrace, currentImageTrace], layout, config).then(async (gd) => {
       document.getElementById("umapContent").style.display = "block";
       setUmapWindowSize("fullscreen");
       hideUmapSpinner();
 
       window.dispatchEvent(new CustomEvent("umapRedrawn"));
 
-      setUmapColorMode();
+      await setUmapColorMode();
       let hoverTimer = null;
       let isHovering = false;
 
@@ -410,7 +410,7 @@ export async function fetchUmapData() {
     // Dispatch event to notify that UMAP data has been loaded
     window.dispatchEvent(new CustomEvent("umapDataLoaded"));
 
-    setUmapColorMode();
+    await setUmapColorMode();
   } finally {
     hideUmapSpinner();
   }
@@ -457,7 +457,7 @@ plotDiv.addEventListener("mouseleave", () => {
 });
 
 // --- Dynamic Colorization ---
-export function colorizeUmap({ highlight = false, searchResults = [] } = {}) {
+export async function colorizeUmap({ highlight = false, searchResults = [] } = {}) {
   if (!points.length) {
     return;
   }
@@ -467,6 +467,9 @@ export function colorizeUmap({ highlight = false, searchResults = [] } = {}) {
     return;
   }
 
+  // Yield to the browser to allow spinner to render before heavy Plotly operations
+  await new Promise((resolve) => setTimeout(resolve, 0));
+
   if (highlight && searchResults.length > 0) {
     const searchSet = new Set(searchResults.map((r) => r.index));
 
@@ -569,8 +572,8 @@ window.addEventListener("stateReady", () => {
   const highlightCheckbox = document.getElementById("umapHighlightSelection");
   if (highlightCheckbox) {
     highlightCheckbox.checked = false;
-    highlightCheckbox.addEventListener("change", () => {
-      setUmapColorMode();
+    highlightCheckbox.addEventListener("change", async () => {
+      await setUmapColorMode();
     });
   }
 
@@ -661,9 +664,9 @@ function updateExitFullscreenCheckboxState() {
 }
 
 // --- Update colorization after search or cluster selection ---
-window.addEventListener("searchResultsChanged", (e) => {
+window.addEventListener("searchResultsChanged", async (e) => {
   updateUmapColorModeAvailability(e.detail.results);
-  setUmapColorMode();
+  await setUmapColorMode();
   // deactivate fullscreen mode when search results have come in (if enabled)
   if (state.searchResults.length > 0 && isFullscreen && state.umapExitFullscreenOnSelection) {
     setTimeout(() => toggleFullscreen(false), 100); // slight delay to avoid flicker
@@ -920,8 +923,8 @@ function removeUmapThumbnail() {
   umapThumbnailDiv = null;
 }
 
-export function setUmapColorMode() {
-  colorizeUmap({
+export async function setUmapColorMode() {
+  await colorizeUmap({
     highlight: document.getElementById("umapHighlightSelection")?.checked,
     searchResults: state.searchResults,
   });
@@ -943,7 +946,7 @@ function updateUmapColorModeAvailability(searchResults = []) {
     highlightCheckbox.disabled = true;
     highlightCheckbox.parentElement.style.opacity = "0.5";
   }
-  setUmapColorMode();
+  // Note: setUmapColorMode is called by the searchResultsChanged event handler
 }
 
 // ------------- Handling Landmark Thumbnails -------------