Await Plotly operations to keep spinner visible during rendering

Co-authored-by: lstein <[email protected]>

Author: Copilot

photomap/frontend/static/javascript/umap.js

@@ -478,7 +478,7 @@ export async function colorizeUmap({ highlight = false, searchResults = [] } = {
     const highlightedPoints = points.filter((p) => searchSet.has(p.index));
 
     // Update main trace with only regular points
-    Plotly.restyle(
+    await Plotly.restyle(
       "umapPlot",
       {
         x: [regularPoints.map((p) => p.x)],
@@ -511,9 +511,9 @@ export async function colorizeUmap({ highlight = false, searchResults = [] } = {
     };
 
     if (highlightTraceIdx === -1) {
-      Plotly.addTraces(plotDiv, [highlightTrace]);
+      await Plotly.addTraces(plotDiv, [highlightTrace]);
     } else {
-      Plotly.restyle(
+      await Plotly.restyle(
         plotDiv,
         {
           x: [highlightTrace.x],
@@ -530,21 +530,21 @@ export async function colorizeUmap({ highlight = false, searchResults = [] } = {
     // Ensure Current Image marker stays on top
     const markerTraceIndex = plotDiv.data.findIndex((trace) => trace.name === "Current Image");
     if (markerTraceIndex !== -1 && markerTraceIndex !== plotDiv.data.length - 1) {
-      Plotly.moveTraces(plotDiv, markerTraceIndex, plotDiv.data.length - 1);
+      await Plotly.moveTraces(plotDiv, markerTraceIndex, plotDiv.data.length - 1);
     }
   } else {
     // Remove highlight trace if it exists
     const highlightTraceIdx = plotDiv.data?.findIndex((t) => t.name === "HighlightedPoints");
     if (highlightTraceIdx !== -1) {
-      Plotly.deleteTraces(plotDiv, highlightTraceIdx);
+      await Plotly.deleteTraces(plotDiv, highlightTraceIdx);
     }
 
     // Restore ALL points to main trace with normal coloring
     const markerColors = points.map((p) => getClusterColor(p.cluster));
     const markerAlphas = points.map((p) => (p.cluster === -1 ? 0.2 : 0.75));
     const markerSizes = points.map(() => 5);
 
-    Plotly.restyle(
+    await Plotly.restyle(
       "umapPlot",
       {
         x: [points.map((p) => p.x)],
@@ -561,7 +561,7 @@ export async function colorizeUmap({ highlight = false, searchResults = [] } = {
     // Ensure Current Image marker stays on top after removing highlight
     const markerTraceIndex = plotDiv.data.findIndex((trace) => trace.name === "Current Image");
     if (markerTraceIndex !== -1 && markerTraceIndex !== plotDiv.data.length - 1) {
-      Plotly.moveTraces(plotDiv, markerTraceIndex, plotDiv.data.length - 1);
+      await Plotly.moveTraces(plotDiv, markerTraceIndex, plotDiv.data.length - 1);
     }
   }
 }