LoadingTransform UI/UX improvements

examples/components.py

@@ -20,6 +20,7 @@
 font_size = IntInput(value=14, name='Font Size', step=1, start=2, end=100, sizing_mode='stretch_width')
 
 busy = Button(label='Busy', on_click=lambda e: time.sleep(2))
+loading_switch = Switch(name='Loading')
 
 theme_config = {
     "light": {
@@ -99,14 +100,14 @@ def show_variants(component, variants=None, **kwargs):
     )
 
 
-def render_spec(spec, depth=0, label='main'):
+def render_spec(spec, depth=0, label='main', loading=False):
     if isinstance(spec, dict):
         tabs = Tabs(*(
-            (title, render_spec(subspec, depth+1, label=title)) for title, subspec in spec.items()
+            (title, render_spec(subspec, depth+1, label=title, loading=loading)) for title, subspec in spec.items()
         ), sizing_mode='stretch_width')
     else:
         tabs = Tabs(*(
-            pn.param.ParamFunction(pn.bind(show_variants, component, variants=varss, **kwargs), lazy=True, name=component.name)
+            pn.param.ParamFunction(pn.bind(show_variants, component, variants=varss, **kwargs, loading=loading), lazy=True, name=component.name)
             for component, varss,  kwargs in spec
         ), dynamic=True)
     pn.state.location.sync(tabs, dict(active=f'active{label}'))
@@ -234,19 +235,24 @@ def render_openable(component: Type[MaterialComponent], **kwargs):
     },
 }
 
+
+def loading_render_spec(loading):
+    return render_spec(spec, loading=loading)
+
 notifications = pn.state.notifications.demo(sizing_mode='stretch_width')
 
 page = Page(
     contextbar=[
         '### Context'
     ],
     busy_indicator='linear',
-    main=[render_spec(spec)],
+    main=[pn.bind(loading_render_spec, loading_switch)],
     sidebar=[
         primary_color,
         secondary_color,
         paper_color,
         font_size,
+        loading_switch,
         '### Notifications',
         notifications,
         busy

src/panel_material_ui/base.py

@@ -191,10 +191,11 @@ class LoadingTransform(ESMTransform):
 
 function {output}(props) {{
   const [loading] = props.model.useState('loading')
+  const [loading_inset] = props.model.useState('loading_inset')
   const theme = useMuiTheme()
 
   const overlayColor = theme.palette.mode === 'dark'
-    ? 'rgba(0, 0, 0, 0.7)'
+    ? 'rgba(18, 18, 18, 0.7)'
     : 'rgba(255, 255, 255, 0.5)'
 
   return (
@@ -203,10 +204,7 @@ class LoadingTransform(ESMTransform):
       {{loading && (
         <div style={{{{
           position: 'absolute',
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
+          inset: loading_inset,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -234,6 +232,9 @@ class MaterialComponent(ReactComponent):
     loading = param.Boolean(default=False, doc="""
         If True displays a loading spinner on top of the component.""")
 
+    loading_inset = param.Integer(default=0, doc="""
+        Loading spinner wrapper inset style rule value.""")
+
     theme_config = param.Dict(default=None, nested_refs=True, doc="""
         Options to configure the ThemeProvider.
         See https://mui.com/material-ui/customization/theme-overview/ for more information.""")

src/panel_material_ui/widgets/input.py

@@ -31,6 +31,9 @@
 
 class MaterialInputWidget(MaterialWidget):
 
+    loading_inset = param.Integer(default=-6, doc="""
+        Loading spinner wrapper inset style rule value.""")
+
     color = param.Selector(objects=COLORS, default="primary", doc="""
         The color variant of the input.""")
 
@@ -1156,6 +1159,9 @@ class Checkbox(MaterialWidget):
     >>> Checkbox(label='Works with the tools you know and love', value=True)
     """
 
+    loading_inset = param.Integer(default=-6, doc="""
+        Loading spinner wrapper inset style rule value.""")
+
     color = param.Selector(objects=COLORS, default="primary", doc="""
         The color of the checkbox.""")
 

src/panel_material_ui/widgets/select.py

@@ -26,6 +26,9 @@ class MaterialSingleSelectBase(MaterialWidget, _PnSingleSelectBase):
     This is an abstract base class and should not be used directly.
     """
 
+    loading_inset = param.Integer(default=-6, doc="""
+        Loading spinner wrapper inset style rule value.""")
+
     value = param.Parameter(default=None, allow_None=True, doc="The selected value.")
 
     _allows_values = False
@@ -44,6 +47,9 @@ class MaterialMultiSelectBase(MaterialWidget, _PnMultiSelectBase):
     This is an abstract base class and should not be used directly.
     """
 
+    loading_inset = param.Integer(default=-6, doc="""
+        Loading spinner wrapper inset style rule value.""")
+
     value = param.List(default=[], allow_None=True, doc="The selected values.")
 
     _rename = {"name": "name"}