Merge pull request #44 from mlexchange/fix-loading-overlay

🚸 improve fig loading overlay to only show on img change

callbacks/image_viewer.py

@@ -1,4 +1,4 @@
-from dash import Input, Output, State, callback, ctx
+from dash import Input, Output, State, callback, ctx, clientside_callback
 import dash_mantine_components as dmc
 from tifffile import imread
 import plotly.express as px
@@ -8,11 +8,13 @@
 
 @callback(
     Output("image-viewer", "figure"),
+    Output("image-viewer-loading", "zIndex", allow_duplicate=True),
     Input("image-selection-slider", "value"),
     State("project-name-src", "value"),
     State("paintbrush-width", "value"),
     State("annotation-class-selection", "className"),
     State("annotation-store", "data"),
+    prevent_initial_call=True,
 )
 def render_image(
     image_idx,
@@ -60,7 +62,19 @@ def render_image(
         if str(image_idx) in annotation_store["annotations"]:
             fig["layout"]["shapes"] = annotation_store["annotations"][str(image_idx)]
 
-    return fig
+    fig_loading_overlay = -1
+    return fig, fig_loading_overlay
+
+
+clientside_callback(
+    """
+    function EnableImageLoadingOverlay(zIndex) {
+        return 9999;
+    }
+    """,
+    Output("image-viewer-loading", "zIndex"),
+    Input("image-selection-slider", "value"),
+)
 
 
 @callback(

components/image_viewer.py

@@ -81,6 +81,7 @@ def layout():
             ),
             dmc.Space(h=20),
             dmc.LoadingOverlay(
+                id="image-viewer-loading",
                 overlayOpacity=0.15,
                 loaderProps=dict(
                     color=dmc.theme.DEFAULT_COLORS["blue"][6], variant="bars"