Add spinner feedback when clicking UMAP clusters

Show the UMAP spinner immediately when a user clicks on a cluster or image in the semantic map, providing visual feedback during processing. The spinner is hidden after the cluster selection and UI updates complete.

- Added showUmapSpinner() call at the start of handleClusterClick()
- Added showUmapSpinner() call at the start of handleImageClick()
- Wrapped operations in try/finally to ensure spinner is always hidden
- Added requestAnimationFrame delay to ensure UI updates before hiding spinner

This improves UX on large photo collections where cluster selection can be slow.

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

Add setTimeout(0) to allow spinner to render before heavy computation

The issue was that the synchronous operations were executing immediately after showing the spinner, without giving the browser a chance to paint the DOM changes. By adding `await new Promise(resolve => setTimeout(resolve, 0))`, we yield control back to the event loop, allowing the browser to render the spinner before the expensive cluster sorting operations begin.

This ensures the spinner is visible during the 1-3 second delay on large clusters.

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

Author: Copilot

photomap/frontend/static/css/spinners.css

@@ -16,7 +16,8 @@
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-  z-index: 1000;
+  z-index: 10000;
+  pointer-events: none;
 }
 
 #umapSpinner .umap-spinner {

photomap/frontend/static/javascript/umap.js

@@ -1256,50 +1256,72 @@ function proximityClusterOrder(clusterIndices, points, startIndex) {
 async function handleClusterClick(clickedIndex) {
   const clickedPoint = points.find((p) => p.index === clickedIndex);
   if (!clickedPoint) return;
+  
+  // Show spinner immediately to provide visual feedback
+  showUmapSpinner();
+  
+  // Yield to the browser to allow spinner to render before heavy computation
+  await new Promise(resolve => setTimeout(resolve, 0));
+  
+  try {
+    const clickedCluster = clickedPoint.cluster;
+    const clusterColor = getClusterColor(clickedCluster);
+    let clusterIndices = points
+      .filter((p) => p.cluster === clickedCluster)
+      .map((p) => p.index);
+
+    // Remove clickedFilename from the list
+    clusterIndices = clusterIndices.filter((fn) => fn !== clickedIndex);
+
+    // --- Greedy random walk order from clicked point ---
+    const sort_algorithm =
+      clusterIndices.length > randomWalkMaxSize
+        ? proximityClusterOrder
+        : randomWalkClusterOrder;
+    const sortedClusterIndices = sort_algorithm(
+      [clickedIndex, ...clusterIndices],
+      points,
+      clickedIndex
+    );
 
-  const clickedCluster = clickedPoint.cluster;
-  const clusterColor = getClusterColor(clickedCluster);
-  let clusterIndices = points
-    .filter((p) => p.cluster === clickedCluster)
-    .map((p) => p.index);
-
-  // Remove clickedFilename from the list
-  clusterIndices = clusterIndices.filter((fn) => fn !== clickedIndex);
-
-  // --- Greedy random walk order from clicked point ---
-  const sort_algorithm =
-    clusterIndices.length > randomWalkMaxSize
-      ? proximityClusterOrder
-      : randomWalkClusterOrder;
-  const sortedClusterIndices = sort_algorithm(
-    [clickedIndex, ...clusterIndices],
-    points,
-    clickedIndex
-  );
-
-  const clusterMembers = sortedClusterIndices.map((index) => ({
-    index: index,
-    cluster: clickedCluster === -1 ? "unclustered" : clickedCluster,
-    color: clusterColor,
-  }));
+    const clusterMembers = sortedClusterIndices.map((index) => ({
+      index: index,
+      cluster: clickedCluster === -1 ? "unclustered" : clickedCluster,
+      color: clusterColor,
+    }));
 
-  setSearchResults(clusterMembers, "cluster");
+    setSearchResults(clusterMembers, "cluster");
+  } finally {
+    // Always hide spinner, even if there's an error
+    hideUmapSpinner();
+  }
 }
 
 // Handle single image selection (navigate to clicked image)
 async function handleImageClick(clickedIndex) {
   const clickedPoint = points.find((p) => p.index === clickedIndex);
   if (!clickedPoint) return;
-
-  // Clear any existing search selection
-  exitSearchMode();
 
-  // Navigate directly to the clicked image without entering search mode
-  slideState.navigateToIndex(clickedIndex, false);
+  // Show spinner immediately to provide visual feedback
+  showUmapSpinner();
+  
+  // Yield to the browser to allow spinner to render before heavy computation
+  await new Promise(resolve => setTimeout(resolve, 0));
 
-  // Exit fullscreen mode if enabled
-  if (isFullscreen && state.umapExitFullscreenOnSelection) {
-    setTimeout(() => toggleFullscreen(false), 100); // slight delay to avoid flicker
+  try {
+    // Clear any existing search selection
+    exitSearchMode();
+    
+    // Navigate directly to the clicked image without entering search mode
+    slideState.navigateToIndex(clickedIndex, false);
+    
+    // Exit fullscreen mode if enabled
+    if (isFullscreen && state.umapExitFullscreenOnSelection) {
+      setTimeout(() => toggleFullscreen(false), 100); // slight delay to avoid flicker
+    }
+  } finally {
+    // Always hide spinner, even if there's an error
+    hideUmapSpinner();
   }
 }
 

photomap/frontend/templates/modules/umap-floating-window.html

@@ -117,7 +117,8 @@
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
-      z-index: 1000;
+      z-index: 10000;
+      pointer-events: none;
     "
   >
     <div class="umap-spinner"></div>