Merge branch 'dev' into fix/multi-set-props

Author: T4rk1n

CHANGELOG.md

@@ -6,6 +6,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 
 ## Fixed
 
+- [#2860](https://github.com/plotly/dash/pull/2860) Fix dcc.Loading to apply overlay_style only to the children and not the spinner. Fixes [#2858](https://github.com/plotly/dash/issues/2858)
 - [#2854](https://github.com/plotly/dash/pull/2854) Fix dcc.Dropdown resetting empty values to null and triggering callbacks. Fixes [#2850](https://github.com/plotly/dash/issues/2850)
 - [#2859](https://github.com/plotly/dash/pull/2859) Fix base patch operators. fixes [#2855](https://github.com/plotly/dash/issues/2855)
 - [#2856](https://github.com/plotly/dash/pull/2856) Fix multiple consecutive calls with same id to set_props only keeping the last props. Fixes [#2852](https://github.com/plotly/dash/issues/2852)

components/dash-core-components/src/components/Loading.react.js

@@ -5,7 +5,6 @@ import DefaultSpinner from '../fragments/Loading/spinners/DefaultSpinner.jsx';
 import CubeSpinner from '../fragments/Loading/spinners/CubeSpinner.jsx';
 import CircleSpinner from '../fragments/Loading/spinners/CircleSpinner.jsx';
 import DotSpinner from '../fragments/Loading/spinners/DotSpinner.jsx';
-import {mergeRight} from 'ramda';
 
 const spinnerComponentOptions = {
     graph: GraphSpinner,
@@ -49,10 +48,6 @@ const Loading = ({
         justifyContent: 'center',
         alignItems: 'center',
     };
-    const hiddenContainer = mergeRight(
-        {visibility: 'hidden', position: 'relative'},
-        overlay_style
-    );
 
     /* Overrides default Loading behavior if target_components is set. By default,
      *  Loading fires when any recursive child enters loading state. This makes loading
@@ -132,14 +127,23 @@ const Loading = ({
 
     return (
         <div
+            style={{position: 'relative', ...parent_style}}
             className={parent_className}
-            style={
-                showSpinner
-                    ? mergeRight(hiddenContainer, parent_style)
-                    : parent_style
-            }
         >
-            {children}
+            <div
+                className={parent_className}
+                style={
+                    showSpinner
+                        ? {
+                              visibility: 'hidden',
+                              ...overlay_style,
+                              ...parent_style,
+                          }
+                        : parent_style
+                }
+            >
+                {children}
+            </div>
             <div style={showSpinner ? coveringSpinner : {}}>
                 {showSpinner &&
                     (custom_spinner || (

components/dash-core-components/tests/integration/loading/test_loading_component.py

@@ -406,7 +406,7 @@ def updateDiv(n_clicks):
         dash_dcc.find_element(".loading .dash-spinner")
         # unlike the default, the content should be visible
         dash_dcc.wait_for_text_to_equal("#div-1", "content")
-        dash_dcc.wait_for_style_to_equal("#root > div", "opacity", "0.5")
+        dash_dcc.wait_for_style_to_equal("#root > div > div", "opacity", "0.5")
 
     dash_dcc.wait_for_text_to_equal("#div-1", "changed")