From 8e181d7722a48528b850c3280237020cb2e3cbdb Mon Sep 17 00:00:00 2001
From: Shammamah Hossain <shammamah.hossain@gmail.com>
Date: Wed, 22 Jan 2020 14:21:44 -0500
Subject: [PATCH 01/20] Ensure that components are still in the DOM when they
 are loading.

---
 src/components/Loading.react.js | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/Loading.react.js b/src/components/Loading.react.js
index 2077fbb9e..7a29f2784 100644
--- a/src/components/Loading.react.js
+++ b/src/components/Loading.react.js
@@ -40,14 +40,27 @@ export default class Loading extends Component {
         if (loading_state && loading_state.is_loading) {
             const Spinner = getSpinner(spinnerType);
             return (
-                <Spinner
-                    className={className}
-                    style={style}
-                    status={loading_state}
-                    color={color}
-                    debug={debug}
-                    fullscreen={fullscreen}
-                />
+                <div style={{visibility: 'hidden', position: 'relative'}}>
+                    {this.props.children}
+                    <Spinner
+                        className={className}
+                        style={{
+                            visibility: 'visible',
+                            position: 'absolute',
+                            top: '0',
+                            height: '100%',
+                            width: '100%',
+                            display: 'flex',
+                            'justify-content': 'center',
+                            'align-items': 'center',
+                            ...style,
+                        }}
+                        status={loading_state}
+                        color={color}
+                        debug={debug}
+                        fullscreen={fullscreen}
+                    />
+                </div>
             );
         }
 

From 73db3ca5132632c2947e54c20c59cbee73c3adbd Mon Sep 17 00:00:00 2001
From: Shammamah Hossain <shammamah.hossain@gmail.com>
Date: Wed, 22 Jan 2020 14:31:06 -0500
Subject: [PATCH 02/20] Define style prop for spinners as object and not bool.

---
 src/fragments/Loading/spinners/CircleSpinner.jsx  | 2 +-
 src/fragments/Loading/spinners/CubeSpinner.jsx    | 2 +-
 src/fragments/Loading/spinners/DefaultSpinner.jsx | 2 +-
 src/fragments/Loading/spinners/DotSpinner.jsx     | 2 +-
 src/fragments/Loading/spinners/GraphSpinner.jsx   | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/fragments/Loading/spinners/CircleSpinner.jsx b/src/fragments/Loading/spinners/CircleSpinner.jsx
index c7d1369a3..ab53798ea 100644
--- a/src/fragments/Loading/spinners/CircleSpinner.jsx
+++ b/src/fragments/Loading/spinners/CircleSpinner.jsx
@@ -191,7 +191,7 @@ CircleSpinner.propTypes = {
     color: PropTypes.string,
     className: PropTypes.string,
     fullscreen: PropTypes.bool,
-    style: PropTypes.bool,
+    style: PropTypes.object,
     debug: PropTypes.bool,
 };
 
diff --git a/src/fragments/Loading/spinners/CubeSpinner.jsx b/src/fragments/Loading/spinners/CubeSpinner.jsx
index 73dd71c79..5736c321f 100644
--- a/src/fragments/Loading/spinners/CubeSpinner.jsx
+++ b/src/fragments/Loading/spinners/CubeSpinner.jsx
@@ -193,7 +193,7 @@ CubeSpinner.propTypes = {
     color: PropTypes.string,
     className: PropTypes.string,
     fullscreen: PropTypes.bool,
-    style: PropTypes.bool,
+    style: PropTypes.object,
     debug: PropTypes.bool,
 };
 
diff --git a/src/fragments/Loading/spinners/DefaultSpinner.jsx b/src/fragments/Loading/spinners/DefaultSpinner.jsx
index 959904682..5770b9142 100644
--- a/src/fragments/Loading/spinners/DefaultSpinner.jsx
+++ b/src/fragments/Loading/spinners/DefaultSpinner.jsx
@@ -116,7 +116,7 @@ DefaultSpinner.propTypes = {
     color: PropTypes.string,
     className: PropTypes.string,
     fullscreen: PropTypes.bool,
-    style: PropTypes.bool,
+    style: PropTypes.object,
     debug: PropTypes.bool,
 };
 
diff --git a/src/fragments/Loading/spinners/DotSpinner.jsx b/src/fragments/Loading/spinners/DotSpinner.jsx
index 7f41a1264..6cf81159d 100644
--- a/src/fragments/Loading/spinners/DotSpinner.jsx
+++ b/src/fragments/Loading/spinners/DotSpinner.jsx
@@ -95,7 +95,7 @@ DotSpinner.propTypes = {
     color: PropTypes.string,
     className: PropTypes.string,
     fullscreen: PropTypes.bool,
-    style: PropTypes.bool,
+    style: PropTypes.object,
     debug: PropTypes.bool,
 };
 
diff --git a/src/fragments/Loading/spinners/GraphSpinner.jsx b/src/fragments/Loading/spinners/GraphSpinner.jsx
index 5cc4ac5e2..50d32c462 100644
--- a/src/fragments/Loading/spinners/GraphSpinner.jsx
+++ b/src/fragments/Loading/spinners/GraphSpinner.jsx
@@ -332,7 +332,7 @@ GraphSpinner.propTypes = {
     color: PropTypes.string,
     className: PropTypes.string,
     fullscreen: PropTypes.bool,
-    style: PropTypes.bool,
+    style: PropTypes.object,
     debug: PropTypes.bool,
 };
 

From 377004bb9d83186be17fa23db0d3ae5051d3fb67 Mon Sep 17 00:00:00 2001
From: Shammamah Hossain <shammamah.hossain@gmail.com>
Date: Wed, 22 Jan 2020 14:31:23 -0500
Subject: [PATCH 03/20] Fix CSS property names.

---
 src/components/Loading.react.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Loading.react.js b/src/components/Loading.react.js
index 7a29f2784..06d5810c4 100644
--- a/src/components/Loading.react.js
+++ b/src/components/Loading.react.js
@@ -51,8 +51,8 @@ export default class Loading extends Component {
                             height: '100%',
                             width: '100%',
                             display: 'flex',
-                            'justify-content': 'center',
-                            'align-items': 'center',
+                            justifyContent: 'center',
+                            alignItems: 'center',
                             ...style,
                         }}
                         status={loading_state}

From 284c3a3dafc7b5ce86d6d8c096cfde609afab66b Mon Sep 17 00:00:00 2001
From: Shammamah Hossain <shammamah.hossain@gmail.com>
Date: Thu, 23 Jan 2020 14:06:08 -0500
Subject: [PATCH 04/20] Update loading component tests.

---
 tests/unit/Loading.test.js | 28 ++++++++++++++++++++++++----
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/tests/unit/Loading.test.js b/tests/unit/Loading.test.js
index d9d716e10..3e3913d84 100644
--- a/tests/unit/Loading.test.js
+++ b/tests/unit/Loading.test.js
@@ -14,7 +14,12 @@ test('Loading renders', () => {
         </Loading>
     );
 
-    expect(loading.html()).toMatchSnapshot('Loading with is_loading=true');
+    expect(
+        loading
+            .find('.dash-spinner')
+            .parent()
+            .html()
+    ).toMatchSnapshot('Loading with is_loading=true');
 });
 test('Loading renders without loading_state', () => {
     const loading = render(
@@ -49,7 +54,12 @@ test('Loading renders without prop_name', () => {
         </Loading>
     );
 
-    expect(loading.html()).toMatchSnapshot('Loading with is_loading=true');
+    expect(
+        loading
+            .find('.dash-spinner')
+            .parent()
+            .html()
+    ).toMatchSnapshot('Loading with is_loading=true');
 });
 test('Loading renders without loading_state.component_name', () => {
     const statusMock = {
@@ -62,7 +72,12 @@ test('Loading renders without loading_state.component_name', () => {
         </Loading>
     );
 
-    expect(loading.html()).toMatchSnapshot('Loading with is_loading=true');
+    expect(
+        loading
+            .find('.dash-spinner')
+            .parent()
+            .html()
+    ).toMatchSnapshot('Loading with is_loading=true');
 });
 test('Loading renders with multiple children', () => {
     const statusMock = {
@@ -78,7 +93,12 @@ test('Loading renders with multiple children', () => {
         </Loading>
     );
 
-    expect(loading.html()).toMatchSnapshot('Loading with is_loading=true');
+    expect(
+        loading
+            .find('.dash-spinner')
+            .parent()
+            .html()
+    ).toMatchSnapshot('Loading with is_loading=true');
 });
 
 test("Loading checks all it's children for a loading_state", () => {

From bfe6d15be89cfb9dee55a53671316875624651dd Mon Sep 17 00:00:00 2001
From: Shammamah Hossain <shammamah@plot.ly>
Date: Tue, 3 Mar 2020 11:06:15 -0500
Subject: [PATCH 05/20] Fix test name.

---
 tests/integration/graph/test_graph_basics.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/integration/graph/test_graph_basics.py b/tests/integration/graph/test_graph_basics.py
index 55d361e18..873c14854 100644
--- a/tests/integration/graph/test_graph_basics.py
+++ b/tests/integration/graph/test_graph_basics.py
@@ -93,7 +93,7 @@ def selected_df_figure(selection):
 
 
 @pytest.mark.DCC672
-def test_grbs002_graph_wrapped_in_loading_component_does_not_fail(dash_dcc):
+def test_grbs003_graph_wrapped_in_loading_component_does_not_fail(dash_dcc):
     app = dash.Dash(__name__, suppress_callback_exceptions=True)
     app.layout = html.Div([
         html.H1('subplot issue'),

From 8dc4529e46d9c0e9245467835412cc4d335427c4 Mon Sep 17 00:00:00 2001
From: Shammamah Hossain <shammamah@plot.ly>
Date: Tue, 3 Mar 2020 12:05:27 -0500
Subject: [PATCH 06/20] Lock circleci python versions.

---
 .circleci/config.yml | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 2ece53603..111d0b338 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -9,7 +9,7 @@ jobs:
   lint-unit-37: &lint-unit
     working_directory: ~/project
     docker:
-      - image: circleci/python:3.7-stretch-node-browsers
+      - image: circleci/python:3.7.5-stretch-node-browsers
         environment:
           PYTHON_VERSION: py37
     steps:
@@ -44,21 +44,21 @@ jobs:
   lint-unit-36:
     <<: *lint-unit
     docker:
-      - image: circleci/python:3.6-stretch-node-browsers
+      - image: circleci/python:3.6.9-stretch-node-browsers
         environment:
           PYTHON_VERSION: py36
 
   lint-unit-27:
     <<: *lint-unit
     docker:
-      - image: circleci/python:2.7-stretch-node-browsers
+      - image: circleci/python:2.7.16-stretch-node-browsers
         environment:
           PYTHON_VERSION: py27
 
   build-dash-37: &build-dash
     working_directory: ~/project
     docker:
-      - image: circleci/python:3.7-stretch-node-browsers
+      - image: circleci/python:3.7.5-stretch-node-browsers
         environment:
             PYTHON_VERSION: py37
     steps:
@@ -99,21 +99,21 @@ jobs:
   build-dash-36:
     <<: *build-dash
     docker:
-      - image: circleci/python:3.6-stretch-node-browsers
+      - image: circleci/python:3.6.9-stretch-node-browsers
         environment:
           PYTHON_VERSION: py36
 
   build-dash-27:
     <<: *build-dash
     docker:
-      - image: circleci/python:2.7-stretch-node-browsers
+      - image: circleci/python:2.7.16-stretch-node-browsers
         environment:
           PYTHON_VERSION: py27
 
   test-37: &test
     working_directory: ~/project
     docker:
-      - image: circleci/python:3.7-stretch-node-browsers
+      - image: circleci/python:3.7.5-stretch-node-browsers
         environment:
             PYTHON_VERSION: py37
             PERCY_PARALLEL_TOTAL: -1
@@ -145,7 +145,7 @@ jobs:
   test-36:
     <<: *test
     docker:
-      - image: circleci/python:3.6-stretch-node-browsers
+      - image: circleci/python:3.6.9-stretch-node-browsers
         environment:
           PYTHON_VERSION: py36
           PERCY_ENABLE: 0
@@ -153,7 +153,7 @@ jobs:
   test-27:
     <<: *test
     docker:
-      - image: circleci/python:2.7-stretch-node-browsers
+      - image: circleci/python:2.7.16-stretch-node-browsers
         environment:
           PYTHON_VERSION: py27
           PERCY_ENABLE: 0
@@ -161,7 +161,7 @@ jobs:
   test-legacy-37: &test-legacy
     working_directory: ~/project
     docker:
-      - image: circleci/python:3.7-stretch-node-browsers
+      - image: circleci/python:3.7.5-stretch-node-browsers
         environment:
             PYTHON_VERSION: py37
             PERCY_PARALLEL_TOTAL: -1
@@ -195,14 +195,14 @@ jobs:
   test-legacy-36:
     <<: *test-legacy
     docker:
-      - image: circleci/python:3.6-stretch-node-browsers
+      - image: circleci/python:3.6.9-stretch-node-browsers
         environment:
           PYTHON_VERSION: py36
           PERCY_ENABLE: 0
   test-legacy-27:
     <<: *test-legacy
     docker:
-      - image: circleci/python:2.7-stretch-node-browsers
+      - image: circleci/python:2.7.16-stretch-node-browsers
         environment:
           PYTHON_VERSION: py27
           PERCY_ENABLE: 0

From 1cb8da34cbc47b2143a40b91a6e0104acef389bd Mon Sep 17 00:00:00 2001
From: Shammamah Hossain <shammamah.hossain@gmail.com>
Date: Tue, 10 Mar 2020 15:39:08 -0400
Subject: [PATCH 07/20] Update CHANGELOG.

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c48cd564e..0d8218c8b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,7 +5,10 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 ## [Unreleased]
 ### Changed
 - [#766](https://github.com/plotly/dash-core-components/pull/766) Update from React 16.8.6 to 16.13.0
+- [#740](https://github.com/plotly/dash-core-components/pull/740) Keep components that are loading in the DOM, but not visible, as opposed to removing them entirely
 
+### Fixed
+- [#740](https://github.com/plotly/dash-core-components/pull/740) Fixed bug in which mapbox `uirevision` was not behaving when inside a `dcc.Loading` component
 
 ## [1.8.1] -2020-02-27
 ### Added

From f985ece3f27b98d7cba74f91b382a1f4acd03f6e Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 10:42:29 -0400
Subject: [PATCH 08/20] revert python version lock on CI

---
 .circleci/config.yml | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 32007c86f..8ae9a3857 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -9,7 +9,7 @@ jobs:
   lint-unit-37: &lint-unit
     working_directory: ~/project
     docker:
-      - image: circleci/python:3.7.5-stretch-node-browsers
+      - image: circleci/python:3.7-stretch-node-browsers
         environment:
           PYTHON_VERSION: py37
     steps:
@@ -42,21 +42,21 @@ jobs:
   lint-unit-36:
     <<: *lint-unit
     docker:
-      - image: circleci/python:3.6.9-stretch-node-browsers
+      - image: circleci/python:3.6-stretch-node-browsers
         environment:
           PYTHON_VERSION: py36
 
   lint-unit-27:
     <<: *lint-unit
     docker:
-      - image: circleci/python:2.7.16-stretch-node-browsers
+      - image: circleci/python:2.7-stretch-node-browsers
         environment:
           PYTHON_VERSION: py27
 
   build-dash-37: &build-dash
     working_directory: ~/project
     docker:
-      - image: circleci/python:3.7.5-stretch-node-browsers
+      - image: circleci/python:3.7-stretch-node-browsers
         environment:
             PYTHON_VERSION: py37
     steps:
@@ -97,21 +97,21 @@ jobs:
   build-dash-36:
     <<: *build-dash
     docker:
-      - image: circleci/python:3.6.9-stretch-node-browsers
+      - image: circleci/python:3.6-stretch-node-browsers
         environment:
           PYTHON_VERSION: py36
 
   build-dash-27:
     <<: *build-dash
     docker:
-      - image: circleci/python:2.7.16-stretch-node-browsers
+      - image: circleci/python:2.7-stretch-node-browsers
         environment:
           PYTHON_VERSION: py27
 
   test-37: &test
     working_directory: ~/project
     docker:
-      - image: circleci/python:3.7.5-stretch-node-browsers
+      - image: circleci/python:3.7-stretch-node-browsers
         environment:
             PYTHON_VERSION: py37
             PERCY_PARALLEL_TOTAL: -1
@@ -143,7 +143,7 @@ jobs:
   test-36:
     <<: *test
     docker:
-      - image: circleci/python:3.6.9-stretch-node-browsers
+      - image: circleci/python:3.6-stretch-node-browsers
         environment:
           PYTHON_VERSION: py36
           PERCY_ENABLE: 0
@@ -151,7 +151,7 @@ jobs:
   test-27:
     <<: *test
     docker:
-      - image: circleci/python:2.7.16-stretch-node-browsers
+      - image: circleci/python:2.7-stretch-node-browsers
         environment:
           PYTHON_VERSION: py27
           PERCY_ENABLE: 0
@@ -159,7 +159,7 @@ jobs:
   test-legacy-37: &test-legacy
     working_directory: ~/project
     docker:
-      - image: circleci/python:3.7.5-stretch-node-browsers
+      - image: circleci/python:3.7-stretch-node-browsers
         environment:
             PYTHON_VERSION: py37
             PERCY_PARALLEL_TOTAL: -1
@@ -193,14 +193,14 @@ jobs:
   test-legacy-36:
     <<: *test-legacy
     docker:
-      - image: circleci/python:3.6.9-stretch-node-browsers
+      - image: circleci/python:3.6-stretch-node-browsers
         environment:
           PYTHON_VERSION: py36
           PERCY_ENABLE: 0
   test-legacy-27:
     <<: *test-legacy
     docker:
-      - image: circleci/python:2.7.16-stretch-node-browsers
+      - image: circleci/python:2.7-stretch-node-browsers
         environment:
           PYTHON_VERSION: py27
           PERCY_ENABLE: 0

From 01425ff5a7e2d68b6a20d5dbc4dcc3f791fd57f8 Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 11:33:05 -0400
Subject: [PATCH 09/20] pyest.ini - mainly to speed up test discovery with
 `testpaths`

---
 pytest.ini | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 pytest.ini

diff --git a/pytest.ini b/pytest.ini
new file mode 100644
index 000000000..b6302a609
--- /dev/null
+++ b/pytest.ini
@@ -0,0 +1,5 @@
+[pytest]
+testpaths = tests/
+addopts = -rsxX -vv
+log_format = %(asctime)s | %(levelname)s | %(name)s:%(lineno)d | %(message)s
+log_cli_level = ERROR

From 6d398a225764b836f7bc62661e5eb7795005e44d Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 11:42:20 -0400
Subject: [PATCH 10/20] extend --pause option to dashdcc fixture

---
 tests/conftest.py | 1 +
 1 file changed, 1 insertion(+)

diff --git a/tests/conftest.py b/tests/conftest.py
index 34b124ae1..516aed669 100644
--- a/tests/conftest.py
+++ b/tests/conftest.py
@@ -30,5 +30,6 @@ def dash_dcc(request, dash_thread_server, tmpdir):
         download_path=tmpdir.mkdir("download").strpath,
         percy_assets_root=request.config.getoption("percy_assets"),
         percy_finalize=request.config.getoption("nopercyfinalize"),
+        pause=request.config.getoption("pause"),
     ) as dc:
         yield dc

From aa4fce7b739de4c91fbae9e746c0b06883dd8569 Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 11:43:34 -0400
Subject: [PATCH 11/20] fix typo in test_graph_basics that somehow we didn't
 care about before

---
 tests/integration/graph/test_graph_basics.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/integration/graph/test_graph_basics.py b/tests/integration/graph/test_graph_basics.py
index 873c14854..aac21da7f 100644
--- a/tests/integration/graph/test_graph_basics.py
+++ b/tests/integration/graph/test_graph_basics.py
@@ -101,7 +101,7 @@ def test_grbs003_graph_wrapped_in_loading_component_does_not_fail(dash_dcc):
         dcc.Loading(id="page-content")
     ])
 
-    @app.callback(Output('page-content', 'children'), [Input('url', 'value')])
+    @app.callback(Output('page-content', 'children'), [Input('url', 'pathname')])
     def render_page(url):
         return [
             dcc.Dropdown(

From 600a09f5ddd01ec7f3d987063602de794822f912 Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 11:45:31 -0400
Subject: [PATCH 12/20] more consistent structure for Loading component

---
 src/components/Loading.react.js               | 78 +++++++++----------
 tests/unit/Loading.test.js                    |  4 +-
 tests/unit/__snapshots__/Loading.test.js.snap |  2 +-
 3 files changed, 42 insertions(+), 42 deletions(-)

diff --git a/src/components/Loading.react.js b/src/components/Loading.react.js
index 06d5810c4..42e560843 100644
--- a/src/components/Loading.react.js
+++ b/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 {type} from 'ramda';
 
 function getSpinner(spinnerType) {
     switch (spinnerType) {
@@ -22,6 +21,19 @@ function getSpinner(spinnerType) {
     }
 }
 
+const hiddenContainer = {visibility: 'hidden', position: 'relative'};
+
+const coveringSpinner = {
+    visibility: 'visible',
+    position: 'absolute',
+    top: '0',
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+
 /**
  * A Loading component that wraps any other component and displays a spinner until the wrapped component has rendered.
  */
@@ -37,40 +49,26 @@ export default class Loading extends Component {
             type: spinnerType,
         } = this.props;
 
-        if (loading_state && loading_state.is_loading) {
-            const Spinner = getSpinner(spinnerType);
-            return (
-                <div style={{visibility: 'hidden', position: 'relative'}}>
-                    {this.props.children}
-                    <Spinner
-                        className={className}
-                        style={{
-                            visibility: 'visible',
-                            position: 'absolute',
-                            top: '0',
-                            height: '100%',
-                            width: '100%',
-                            display: 'flex',
-                            justifyContent: 'center',
-                            alignItems: 'center',
-                            ...style,
-                        }}
-                        status={loading_state}
-                        color={color}
-                        debug={debug}
-                        fullscreen={fullscreen}
-                    />
+        const isLoading = loading_state && loading_state.is_loading;
+        const Spinner = isLoading && getSpinner(spinnerType);
+
+        return (
+            <div style={isLoading ? hiddenContainer : {}}>
+                {this.props.children}
+                <div style={isLoading ? coveringSpinner : {}}>
+                    {isLoading && (
+                        <Spinner
+                            className={className}
+                            style={style}
+                            status={loading_state}
+                            color={color}
+                            debug={debug}
+                            fullscreen={fullscreen}
+                        />
+                    )}
                 </div>
-            );
-        }
-
-        if (
-            type(this.props.children) !== 'Object' ||
-            type(this.props.children) !== 'Function'
-        ) {
-            return <div className={className}>{this.props.children}</div>;
-        }
-        return this.props.children;
+            </div>
+        );
     }
 }
 
@@ -98,27 +96,29 @@ Loading.propTypes = {
     ]),
 
     /**
-     * Property that determines which spinner to show - one of 'graph', 'cube', 'circle', 'dot', or 'default'.
+     * Property that determines which spinner to show
+     * one of 'graph', 'cube', 'circle', 'dot', or 'default'.
      */
     type: PropTypes.oneOf(['graph', 'cube', 'circle', 'dot', 'default']),
 
     /**
-     * Boolean that determines if the loading spinner will be displayed full-screen or not
+     * Boolean that makes the spinner display full-screen
      */
     fullscreen: PropTypes.bool,
 
     /**
-     * Boolean that determines if the loading spinner will display the status.prop_name and component_name
+     * If true, the spinner will display the component_name and prop_name
+     * while loading
      */
     debug: PropTypes.bool,
 
     /**
-     * Additional CSS class for the root DOM node
+     * Additional CSS class for the spinner root DOM node
      */
     className: PropTypes.string,
 
     /**
-     * Additional CSS styling for the root DOM node
+     * Additional CSS styling for the spinner root DOM node
      */
     style: PropTypes.object,
 
diff --git a/tests/unit/Loading.test.js b/tests/unit/Loading.test.js
index 3e3913d84..9442376d1 100644
--- a/tests/unit/Loading.test.js
+++ b/tests/unit/Loading.test.js
@@ -28,7 +28,7 @@ test('Loading renders without loading_state', () => {
         </Loading>
     );
 
-    expect(loading.html()).toEqual('<div>Loading is done!</div>');
+    expect(loading.html()).toEqual('<div>Loading is done!</div><div></div>');
 });
 test('Loading renders without loading_state.is_loading', () => {
     const statusMock = {
@@ -41,7 +41,7 @@ test('Loading renders without loading_state.is_loading', () => {
         </Loading>
     );
 
-    expect(loading.html()).toEqual('<div>Loading is done!</div>');
+    expect(loading.html()).toEqual('<div>Loading is done!</div><div></div>');
 });
 test('Loading renders without prop_name', () => {
     const statusMock = {
diff --git a/tests/unit/__snapshots__/Loading.test.js.snap b/tests/unit/__snapshots__/Loading.test.js.snap
index 29d3a8c2b..84f1bea22 100644
--- a/tests/unit/__snapshots__/Loading.test.js.snap
+++ b/tests/unit/__snapshots__/Loading.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Loading checks all it's children for a loading_state: Loading spinner for children 1`] = `"<div>Child 1</div><div>Child 2</div><div loading_state=\\"[object Object]\\">Child 3</div>"`;
+exports[`Loading checks all it's children for a loading_state: Loading spinner for children 1`] = `"<div>Child 1</div><div>Child 2</div><div loading_state=\\"[object Object]\\">Child 3</div><div></div>"`;
 
 exports[`Loading renders with multiple children: Loading with is_loading=true 1`] = `
 "<div class=\\"dash-spinner dash-default-spinner\\"><div class=\\"dash-default-spinner-rect1\\"></div><div class=\\"dash-default-spinner-rect2\\"></div><div class=\\"dash-default-spinner-rect3\\"></div><div class=\\"dash-default-spinner-rect4\\"></div><div class=\\"dash-default-spinner-rect5\\"></div></div><style>

From 386137ebd999d376d528e7acb710fbbdcb24851f Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 14:35:12 -0400
Subject: [PATCH 13/20] robustify store test

---
 tests/integration/store/test_component_props.py | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/tests/integration/store/test_component_props.py b/tests/integration/store/test_component_props.py
index 15587ad68..e0095412b 100644
--- a/tests/integration/store/test_component_props.py
+++ b/tests/integration/store/test_component_props.py
@@ -4,17 +4,18 @@
 import dash
 from dash.dependencies import Input, Output, State
 from dash.exceptions import PreventUpdate
+import dash.testing.wait as wait
 import dash_core_components as dcc
 import dash_html_components as html
 
 
-def test_stcp100_clear_data_on_all_types(store_app, dash_dcc):
+def test_stcp001_clear_data_on_all_types(store_app, dash_dcc):
     dash_dcc.start_server(store_app)
 
     assert dash_dcc.wait_for_contains_text("#output", store_app.uuid)
 
     dash_dcc.multiple_click("#btn", 3)
-    assert dash_dcc.get_local_storage() == {"n_clicks": 3}
+    wait.until(lambda: dash_dcc.get_local_storage() == {"n_clicks": 3}, timeout=1)
 
     # button click sets clear_data=True on all type of stores
     dash_dcc.find_element("#clear-btn").click()
@@ -28,7 +29,7 @@ def test_stcp100_clear_data_on_all_types(store_app, dash_dcc):
     ), "set clear_data=True should clear all data in three storage types"
 
 
-def test_stcp200_modified_ts(store_app, dash_dcc):
+def test_stcp002_modified_ts(store_app, dash_dcc):
     app = dash.Dash(__name__)
     app.layout = html.Div(
         [

From 22a1975e9e7c39dd4c9b15822fe9b2b36a813e68 Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 15:06:02 -0400
Subject: [PATCH 14/20] port loading component tests to dash.testing - without
 fixing them

---
 .../loading/test_loading_component.py         | 209 ++++++++++++
 tests/test_integration_1.py                   | 298 ------------------
 2 files changed, 209 insertions(+), 298 deletions(-)
 create mode 100644 tests/integration/loading/test_loading_component.py

diff --git a/tests/integration/loading/test_loading_component.py b/tests/integration/loading/test_loading_component.py
new file mode 100644
index 000000000..3e98c71dc
--- /dev/null
+++ b/tests/integration/loading/test_loading_component.py
@@ -0,0 +1,209 @@
+from multiprocessing import Lock
+
+import dash
+from dash.dependencies import Input, Output
+import dash_core_components as dcc
+import dash_html_components as html
+
+
+def test_ldcp001_loading_component_initialization(dash_dcc):
+    lock = Lock()
+
+    app = dash.Dash(__name__)
+
+    app.layout = html.Div([
+        dcc.Loading([html.Div(id='div-1')], className='loading')
+    ], id='root')
+
+    @app.callback(Output('div-1', 'children'), [Input('root', 'n_clicks')])
+    def updateDiv(children):
+        with lock:
+            return 'content'
+
+    with lock:
+        dash_dcc.start_server(app)
+        dash_dcc.find_element('.loading .dash-spinner')
+
+    dash_dcc.find_element('.loading #div-1')
+
+    assert not dash_dcc.get_logs()
+
+
+def test_ldcp002_loading_component_action(dash_dcc):
+    lock = Lock()
+
+    app = dash.Dash(__name__)
+
+    app.layout = html.Div([
+        dcc.Loading([html.Div(id='div-1')], className='loading')
+    ], id='root')
+
+    @app.callback(Output('div-1', 'children'), [Input('root', 'n_clicks')])
+    def updateDiv(n_clicks):
+        if n_clicks is not None:
+            with lock:
+                return
+
+        return 'content'
+
+    with lock:
+        dash_dcc.start_server(app)
+        dash_dcc.find_element('.loading #div-1')
+
+        dash_dcc.find_element('#root').click()
+
+        dash_dcc.find_element('.loading .dash-spinner')
+
+    dash_dcc.find_element('.loading #div-1')
+
+    assert not dash_dcc.get_logs()
+
+
+def test_ldcp003_multiple_loading_components(dash_dcc):
+    lock = Lock()
+
+    app = dash.Dash(__name__)
+
+    app.layout = html.Div([
+        dcc.Loading([html.Button(id='btn-1')], className='loading-1'),
+        dcc.Loading([html.Button(id='btn-2')], className='loading-2')
+    ], id='root')
+
+    @app.callback(Output('btn-1', 'value'), [Input('btn-2', 'n_clicks')])
+    def updateDiv(n_clicks):
+        if n_clicks is not None:
+            with lock:
+                return
+
+        return 'content'
+
+    @app.callback(Output('btn-2', 'value'), [Input('btn-1', 'n_clicks')])
+    def updateDiv(n_clicks):
+        if n_clicks is not None:
+            with lock:
+                return
+
+        return 'content'
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.find_element('.loading-1 #btn-1')
+    dash_dcc.find_element('.loading-2 #btn-2')
+
+    with lock:
+        dash_dcc.find_element('#btn-1').click()
+
+        dash_dcc.find_element('.loading-2 .dash-spinner')
+        dash_dcc.find_element('.loading-1 #btn-1')
+
+    dash_dcc.find_element('.loading-2 #btn-2')
+
+    with lock:
+        dash_dcc.find_element('#btn-2').click()
+
+        dash_dcc.find_element('.loading-1 .dash-spinner')
+
+    dash_dcc.find_element('.loading-1 #btn-1')
+    dash_dcc.find_element('.loading-2 #btn-2')
+
+    assert not dash_dcc.get_logs()
+
+
+def test_ldcp004_nested_loading_components(dash_dcc):
+    lock = Lock()
+
+    app = dash.Dash(__name__)
+
+    app.layout = html.Div([
+        dcc.Loading([
+            html.Button(id='btn-1'),
+            dcc.Loading([html.Button(id='btn-2')], className='loading-2')
+        ], className='loading-1')
+    ], id='root')
+
+    @app.callback(Output('btn-1', 'value'), [Input('btn-2', 'n_clicks')])
+    def updateDiv(n_clicks):
+        if n_clicks is not None:
+            with lock:
+                return
+
+        return 'content'
+
+    @app.callback(Output('btn-2', 'value'), [Input('btn-1', 'n_clicks')])
+    def updateDiv(n_clicks):
+        if n_clicks is not None:
+            with lock:
+                return
+
+        return 'content'
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.find_element('.loading-1 #btn-1')
+    dash_dcc.find_element('.loading-2 #btn-2')
+
+    with lock:
+        dash_dcc.find_element('#btn-1').click()
+
+        dash_dcc.find_element('.loading-2 .dash-spinner')
+        dash_dcc.find_element('.loading-1 #btn-1')
+
+    dash_dcc.find_element('.loading-2 #btn-2')
+
+    with lock:
+        dash_dcc.find_element('#btn-2').click()
+
+        dash_dcc.find_element('.loading-1 .dash-spinner')
+
+    dash_dcc.find_element('.loading-1 #btn-1')
+    dash_dcc.find_element('.loading-2 #btn-2')
+
+    assert not dash_dcc.get_logs()
+
+
+def test_ldcp005_dynamic_loading_component(dash_dcc):
+    lock = Lock()
+
+    app = dash.Dash(__name__)
+    app.config['suppress_callback_exceptions'] = True
+
+    app.layout = html.Div([html.Button(id='btn-1'), html.Div(id='div-1')])
+
+    @app.callback(Output('div-1', 'children'), [Input('btn-1', 'n_clicks')])
+    def updateDiv(n_clicks):
+        if n_clicks is None:
+            return
+
+        with lock:
+            return html.Div([
+                html.Button(id='btn-2'),
+                dcc.Loading([html.Button(id='btn-3')], className='loading-1')
+            ])
+
+    @app.callback(Output('btn-3', 'content'), [Input('btn-2', 'n_clicks')])
+    def updateDynamic(n_clicks):
+        if n_clicks is None:
+            return
+
+        with lock:
+            return 'content'
+
+    dash_dcc.start_server(app)
+
+    dash_dcc.find_element('#btn-1')
+    dash_dcc.find_element('#div-1')
+
+    dash_dcc.find_element('#btn-1').click()
+
+    dash_dcc.find_element('#div-1 #btn-2')
+    dash_dcc.find_element('.loading-1 #btn-3')
+
+    with lock:
+        dash_dcc.find_element('#btn-2').click()
+
+        dash_dcc.find_element('.loading-1 .dash-spinner')
+
+    dash_dcc.find_element('#div-1 #btn-2')
+    dash_dcc.find_element('.loading-1 #btn-3')
+
+    assert not dash_dcc.get_logs()
diff --git a/tests/test_integration_1.py b/tests/test_integration_1.py
index f7479d30b..7cedf563e 100644
--- a/tests/test_integration_1.py
+++ b/tests/test_integration_1.py
@@ -38,304 +38,6 @@ def snapshot(self, name):
             print("Percy Snapshot {}".format(python_version))
             self.percy_runner.snapshot(name=name)
 
-    def test_loading_component_initialization(self):
-        lock = Lock()
-
-        app = dash.Dash(__name__)
-
-        app.layout = html.Div([
-            dcc.Loading([
-                html.Div(id='div-1')
-            ], className='loading')
-        ], id='root')
-
-        @app.callback(
-            Output('div-1', 'children'),
-            [Input('root', 'n_clicks')]
-        )
-        def updateDiv(children):
-            with lock:
-                return 'content'
-
-        with lock:
-            self.startServer(app)
-            self.wait_for_element_by_css_selector(
-                '.loading .dash-spinner'
-            )
-
-        self.wait_for_element_by_css_selector(
-            '.loading #div-1'
-        )
-
-        for entry in self.get_log():
-            raise Exception('browser error logged during test', entry)
-
-    def test_loading_component_action(self):
-        lock = Lock()
-
-        app = dash.Dash(__name__)
-
-        app.layout = html.Div([
-            dcc.Loading([
-                html.Div(id='div-1')
-            ], className='loading')
-        ], id='root')
-
-        @app.callback(
-            Output('div-1', 'children'),
-            [Input('root', 'n_clicks')]
-        )
-        def updateDiv(n_clicks):
-            if n_clicks is not None:
-                with lock:
-                    return
-
-            return 'content'
-
-        with lock:
-            self.startServer(app)
-            self.wait_for_element_by_css_selector(
-                '.loading #div-1'
-            )
-
-            self.driver.find_element_by_id('root').click()
-
-            self.wait_for_element_by_css_selector(
-                '.loading .dash-spinner'
-            )
-
-        self.wait_for_element_by_css_selector(
-            '.loading #div-1'
-        )
-
-        for entry in self.get_log():
-            raise Exception('browser error logged during test', entry)
-
-    def test_multiple_loading_components(self):
-        lock = Lock()
-
-        app = dash.Dash(__name__)
-
-        app.layout = html.Div([
-            dcc.Loading([
-                html.Button(id='btn-1')
-            ], className='loading-1'),
-            dcc.Loading([
-                html.Button(id='btn-2')
-            ], className='loading-2')
-        ], id='root')
-
-        @app.callback(
-            Output('btn-1', 'value'),
-            [Input('btn-2', 'n_clicks')]
-        )
-        def updateDiv(n_clicks):
-            if n_clicks is not None:
-                with lock:
-                    return
-
-            return 'content'
-
-        @app.callback(
-            Output('btn-2', 'value'),
-            [Input('btn-1', 'n_clicks')]
-        )
-        def updateDiv(n_clicks):
-            if n_clicks is not None:
-                with lock:
-                    return
-
-            return 'content'
-
-        self.startServer(app)
-
-        self.wait_for_element_by_css_selector(
-            '.loading-1 #btn-1'
-        )
-        self.wait_for_element_by_css_selector(
-            '.loading-2 #btn-2'
-        )
-
-        with lock:
-            self.driver.find_element_by_id('btn-1').click()
-
-            self.wait_for_element_by_css_selector(
-                '.loading-2 .dash-spinner'
-            )
-            self.wait_for_element_by_css_selector(
-                '.loading-1 #btn-1'
-            )
-
-        self.wait_for_element_by_css_selector(
-            '.loading-2 #btn-2'
-        )
-
-        with lock:
-            self.driver.find_element_by_id('btn-2').click()
-
-            self.wait_for_element_by_css_selector(
-                '.loading-1 .dash-spinner'
-            )
-
-        self.wait_for_element_by_css_selector(
-            '.loading-1 #btn-1'
-        )
-        self.wait_for_element_by_css_selector(
-            '.loading-2 #btn-2'
-        )
-
-        for entry in self.get_log():
-            raise Exception('browser error logged during test', entry)
-
-    def test_nested_loading_components(self):
-        lock = Lock()
-
-        app = dash.Dash(__name__)
-
-        app.layout = html.Div([
-            dcc.Loading([
-                html.Button(id='btn-1'),
-                dcc.Loading([
-                    html.Button(id='btn-2')
-                ], className='loading-2')
-            ], className='loading-1')
-        ], id='root')
-
-        @app.callback(
-            Output('btn-1', 'value'),
-            [Input('btn-2', 'n_clicks')]
-        )
-        def updateDiv(n_clicks):
-            if n_clicks is not None:
-                with lock:
-                    return
-
-            return 'content'
-
-        @app.callback(
-            Output('btn-2', 'value'),
-            [Input('btn-1', 'n_clicks')]
-        )
-        def updateDiv(n_clicks):
-            if n_clicks is not None:
-                with lock:
-                    return
-
-            return 'content'
-
-        self.startServer(app)
-
-        self.wait_for_element_by_css_selector(
-            '.loading-1 #btn-1'
-        )
-        self.wait_for_element_by_css_selector(
-            '.loading-2 #btn-2'
-        )
-
-        with lock:
-            self.driver.find_element_by_id('btn-1').click()
-
-            self.wait_for_element_by_css_selector(
-                '.loading-2 .dash-spinner'
-            )
-            self.wait_for_element_by_css_selector(
-                '.loading-1 #btn-1'
-            )
-
-        self.wait_for_element_by_css_selector(
-            '.loading-2 #btn-2'
-        )
-
-        with lock:
-            self.driver.find_element_by_id('btn-2').click()
-
-            self.wait_for_element_by_css_selector(
-                '.loading-1 .dash-spinner'
-            )
-
-        self.wait_for_element_by_css_selector(
-            '.loading-1 #btn-1'
-        )
-        self.wait_for_element_by_css_selector(
-            '.loading-2 #btn-2'
-        )
-
-        for entry in self.get_log():
-            raise Exception('browser error logged during test', entry)
-
-    def test_dynamic_loading_component(self):
-        lock = Lock()
-
-        app = dash.Dash(__name__)
-        app.config['suppress_callback_exceptions'] = True
-
-        app.layout = html.Div([
-            html.Button(id='btn-1'),
-            html.Div(id='div-1')
-        ])
-
-        @app.callback(
-            Output('div-1', 'children'),
-            [Input('btn-1', 'n_clicks')]
-        )
-        def updateDiv(n_clicks):
-            if n_clicks is None:
-                return
-
-            with lock:
-                return html.Div([
-                    html.Button(id='btn-2'),
-                    dcc.Loading([
-                        html.Button(id='btn-3')
-                    ], className='loading-1')
-                ])
-
-        @app.callback(
-            Output('btn-3', 'content'),
-            [Input('btn-2', 'n_clicks')]
-        )
-        def updateDynamic(n_clicks):
-            if n_clicks is None:
-                return
-
-            with lock:
-                return 'content'
-
-        self.startServer(app)
-
-        self.wait_for_element_by_css_selector(
-            '#btn-1'
-        )
-        self.wait_for_element_by_css_selector(
-            '#div-1'
-        )
-
-        self.driver.find_element_by_id('btn-1').click()
-
-        self.wait_for_element_by_css_selector(
-            '#div-1 #btn-2'
-        )
-        self.wait_for_element_by_css_selector(
-            '.loading-1 #btn-3'
-        )
-
-        with lock:
-            self.driver.find_element_by_id('btn-2').click()
-
-            self.wait_for_element_by_css_selector(
-                '.loading-1 .dash-spinner'
-            )
-
-        self.wait_for_element_by_css_selector(
-            '#div-1 #btn-2'
-        )
-        self.wait_for_element_by_css_selector(
-            '.loading-1 #btn-3'
-        )
-
-        for entry in self.get_log():
-            raise Exception('browser error logged during test', entry)
-
     def test_loading_slider(self):
         lock = Lock()
 

From 2bfaa28738555f614329063680f47b476d7e26a4 Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 15:45:12 -0400
Subject: [PATCH 15/20] update loading component tests for new class usage

---
 .../loading/test_loading_component.py         | 77 ++++++++++---------
 1 file changed, 40 insertions(+), 37 deletions(-)

diff --git a/tests/integration/loading/test_loading_component.py b/tests/integration/loading/test_loading_component.py
index 3e98c71dc..2249c7b17 100644
--- a/tests/integration/loading/test_loading_component.py
+++ b/tests/integration/loading/test_loading_component.py
@@ -23,8 +23,10 @@ def updateDiv(children):
     with lock:
         dash_dcc.start_server(app)
         dash_dcc.find_element('.loading .dash-spinner')
+        # ensure inner component is also mounted
+        dash_dcc.wait_for_text_to_equal("#div-1", "")
 
-    dash_dcc.find_element('.loading #div-1')
+    dash_dcc.wait_for_text_to_equal('#div-1', 'content')
 
     assert not dash_dcc.get_logs()
 
@@ -42,19 +44,21 @@ def test_ldcp002_loading_component_action(dash_dcc):
     def updateDiv(n_clicks):
         if n_clicks is not None:
             with lock:
-                return
+                return "changed"
 
         return 'content'
 
     with lock:
         dash_dcc.start_server(app)
-        dash_dcc.find_element('.loading #div-1')
+        dash_dcc.wait_for_text_to_equal('#div-1', "content")
 
         dash_dcc.find_element('#root').click()
 
         dash_dcc.find_element('.loading .dash-spinner')
+        # mounted but hidden, so looks like no text
+        dash_dcc.wait_for_text_to_equal('#div-1', "")
 
-    dash_dcc.find_element('.loading #div-1')
+    dash_dcc.wait_for_text_to_equal('#div-1', "changed")
 
     assert not dash_dcc.get_logs()
 
@@ -69,42 +73,42 @@ def test_ldcp003_multiple_loading_components(dash_dcc):
         dcc.Loading([html.Button(id='btn-2')], className='loading-2')
     ], id='root')
 
-    @app.callback(Output('btn-1', 'value'), [Input('btn-2', 'n_clicks')])
+    @app.callback(Output('btn-1', 'children'), [Input('btn-2', 'n_clicks')])
     def updateDiv(n_clicks):
         if n_clicks is not None:
             with lock:
-                return
+                return "changed 1"
 
-        return 'content'
+        return 'content 1'
 
-    @app.callback(Output('btn-2', 'value'), [Input('btn-1', 'n_clicks')])
+    @app.callback(Output('btn-2', 'children'), [Input('btn-1', 'n_clicks')])
     def updateDiv(n_clicks):
         if n_clicks is not None:
             with lock:
-                return
+                return "changed 2"
 
-        return 'content'
+        return 'content 2'
 
     dash_dcc.start_server(app)
 
-    dash_dcc.find_element('.loading-1 #btn-1')
-    dash_dcc.find_element('.loading-2 #btn-2')
+    dash_dcc.wait_for_text_to_equal('#btn-1', "content 1")
+    dash_dcc.wait_for_text_to_equal('#btn-2', "content 2")
 
     with lock:
         dash_dcc.find_element('#btn-1').click()
 
         dash_dcc.find_element('.loading-2 .dash-spinner')
-        dash_dcc.find_element('.loading-1 #btn-1')
+        dash_dcc.wait_for_text_to_equal("#btn-2", "")
 
-    dash_dcc.find_element('.loading-2 #btn-2')
+    dash_dcc.wait_for_text_to_equal("#btn-2", "changed 2")
 
     with lock:
         dash_dcc.find_element('#btn-2').click()
 
         dash_dcc.find_element('.loading-1 .dash-spinner')
+        dash_dcc.wait_for_text_to_equal("#btn-1", "")
 
-    dash_dcc.find_element('.loading-1 #btn-1')
-    dash_dcc.find_element('.loading-2 #btn-2')
+    dash_dcc.wait_for_text_to_equal("#btn-1", "changed 1")
 
     assert not dash_dcc.get_logs()
 
@@ -121,42 +125,42 @@ def test_ldcp004_nested_loading_components(dash_dcc):
         ], className='loading-1')
     ], id='root')
 
-    @app.callback(Output('btn-1', 'value'), [Input('btn-2', 'n_clicks')])
+    @app.callback(Output('btn-1', 'children'), [Input('btn-2', 'n_clicks')])
     def updateDiv(n_clicks):
         if n_clicks is not None:
             with lock:
-                return
+                return "changed 1"
 
-        return 'content'
+        return 'content 1'
 
-    @app.callback(Output('btn-2', 'value'), [Input('btn-1', 'n_clicks')])
+    @app.callback(Output('btn-2', 'children'), [Input('btn-1', 'n_clicks')])
     def updateDiv(n_clicks):
         if n_clicks is not None:
             with lock:
-                return
+                return "changed 2"
 
-        return 'content'
+        return 'content 2'
 
     dash_dcc.start_server(app)
 
-    dash_dcc.find_element('.loading-1 #btn-1')
-    dash_dcc.find_element('.loading-2 #btn-2')
+    dash_dcc.wait_for_text_to_equal('#btn-1', "content 1")
+    dash_dcc.wait_for_text_to_equal('#btn-2', "content 2")
 
     with lock:
         dash_dcc.find_element('#btn-1').click()
 
         dash_dcc.find_element('.loading-2 .dash-spinner')
-        dash_dcc.find_element('.loading-1 #btn-1')
+        dash_dcc.wait_for_text_to_equal("#btn-2", "")
 
-    dash_dcc.find_element('.loading-2 #btn-2')
+    dash_dcc.wait_for_text_to_equal("#btn-2", "changed 2")
 
     with lock:
         dash_dcc.find_element('#btn-2').click()
 
         dash_dcc.find_element('.loading-1 .dash-spinner')
+        dash_dcc.wait_for_text_to_equal("#btn-1", "")
 
-    dash_dcc.find_element('.loading-1 #btn-1')
-    dash_dcc.find_element('.loading-2 #btn-2')
+    dash_dcc.wait_for_text_to_equal("#btn-1", "changed 1")
 
     assert not dash_dcc.get_logs()
 
@@ -164,8 +168,7 @@ def updateDiv(n_clicks):
 def test_ldcp005_dynamic_loading_component(dash_dcc):
     lock = Lock()
 
-    app = dash.Dash(__name__)
-    app.config['suppress_callback_exceptions'] = True
+    app = dash.Dash(__name__, suppress_callback_exceptions=True)
 
     app.layout = html.Div([html.Button(id='btn-1'), html.Div(id='div-1')])
 
@@ -180,30 +183,30 @@ def updateDiv(n_clicks):
                 dcc.Loading([html.Button(id='btn-3')], className='loading-1')
             ])
 
-    @app.callback(Output('btn-3', 'content'), [Input('btn-2', 'n_clicks')])
+    @app.callback(Output('btn-3', 'children'), [Input('btn-2', 'n_clicks')])
     def updateDynamic(n_clicks):
         if n_clicks is None:
-            return
+            return "content"
 
         with lock:
-            return 'content'
+            return "changed"
 
     dash_dcc.start_server(app)
 
     dash_dcc.find_element('#btn-1')
-    dash_dcc.find_element('#div-1')
+    dash_dcc.wait_for_text_to_equal('#div-1', "")
 
     dash_dcc.find_element('#btn-1').click()
 
     dash_dcc.find_element('#div-1 #btn-2')
-    dash_dcc.find_element('.loading-1 #btn-3')
+    dash_dcc.wait_for_text_to_equal('#btn-3', "content")
 
     with lock:
         dash_dcc.find_element('#btn-2').click()
 
         dash_dcc.find_element('.loading-1 .dash-spinner')
+        dash_dcc.wait_for_text_to_equal('#btn-3', "")
 
-    dash_dcc.find_element('#div-1 #btn-2')
-    dash_dcc.find_element('.loading-1 #btn-3')
+    dash_dcc.wait_for_text_to_equal('#btn-3', "changed")
 
     assert not dash_dcc.get_logs()

From 8bf9fbf351e3811b60a04785658ff8282aa86eca Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 15:47:48 -0400
Subject: [PATCH 16/20] black test_loading_component

---
 .../loading/test_loading_component.py         | 141 ++++++++++--------
 1 file changed, 76 insertions(+), 65 deletions(-)

diff --git a/tests/integration/loading/test_loading_component.py b/tests/integration/loading/test_loading_component.py
index 2249c7b17..7b83d512e 100644
--- a/tests/integration/loading/test_loading_component.py
+++ b/tests/integration/loading/test_loading_component.py
@@ -11,22 +11,22 @@ def test_ldcp001_loading_component_initialization(dash_dcc):
 
     app = dash.Dash(__name__)
 
-    app.layout = html.Div([
-        dcc.Loading([html.Div(id='div-1')], className='loading')
-    ], id='root')
+    app.layout = html.Div(
+        [dcc.Loading([html.Div(id="div-1")], className="loading")], id="root"
+    )
 
-    @app.callback(Output('div-1', 'children'), [Input('root', 'n_clicks')])
+    @app.callback(Output("div-1", "children"), [Input("root", "n_clicks")])
     def updateDiv(children):
         with lock:
-            return 'content'
+            return "content"
 
     with lock:
         dash_dcc.start_server(app)
-        dash_dcc.find_element('.loading .dash-spinner')
+        dash_dcc.find_element(".loading .dash-spinner")
         # ensure inner component is also mounted
         dash_dcc.wait_for_text_to_equal("#div-1", "")
 
-    dash_dcc.wait_for_text_to_equal('#div-1', 'content')
+    dash_dcc.wait_for_text_to_equal("#div-1", "content")
 
     assert not dash_dcc.get_logs()
 
@@ -36,29 +36,29 @@ def test_ldcp002_loading_component_action(dash_dcc):
 
     app = dash.Dash(__name__)
 
-    app.layout = html.Div([
-        dcc.Loading([html.Div(id='div-1')], className='loading')
-    ], id='root')
+    app.layout = html.Div(
+        [dcc.Loading([html.Div(id="div-1")], className="loading")], id="root"
+    )
 
-    @app.callback(Output('div-1', 'children'), [Input('root', 'n_clicks')])
+    @app.callback(Output("div-1", "children"), [Input("root", "n_clicks")])
     def updateDiv(n_clicks):
         if n_clicks is not None:
             with lock:
                 return "changed"
 
-        return 'content'
+        return "content"
 
     with lock:
         dash_dcc.start_server(app)
-        dash_dcc.wait_for_text_to_equal('#div-1', "content")
+        dash_dcc.wait_for_text_to_equal("#div-1", "content")
 
-        dash_dcc.find_element('#root').click()
+        dash_dcc.find_element("#root").click()
 
-        dash_dcc.find_element('.loading .dash-spinner')
+        dash_dcc.find_element(".loading .dash-spinner")
         # mounted but hidden, so looks like no text
-        dash_dcc.wait_for_text_to_equal('#div-1', "")
+        dash_dcc.wait_for_text_to_equal("#div-1", "")
 
-    dash_dcc.wait_for_text_to_equal('#div-1', "changed")
+    dash_dcc.wait_for_text_to_equal("#div-1", "changed")
 
     assert not dash_dcc.get_logs()
 
@@ -68,44 +68,47 @@ def test_ldcp003_multiple_loading_components(dash_dcc):
 
     app = dash.Dash(__name__)
 
-    app.layout = html.Div([
-        dcc.Loading([html.Button(id='btn-1')], className='loading-1'),
-        dcc.Loading([html.Button(id='btn-2')], className='loading-2')
-    ], id='root')
+    app.layout = html.Div(
+        [
+            dcc.Loading([html.Button(id="btn-1")], className="loading-1"),
+            dcc.Loading([html.Button(id="btn-2")], className="loading-2"),
+        ],
+        id="root",
+    )
 
-    @app.callback(Output('btn-1', 'children'), [Input('btn-2', 'n_clicks')])
+    @app.callback(Output("btn-1", "children"), [Input("btn-2", "n_clicks")])
     def updateDiv(n_clicks):
         if n_clicks is not None:
             with lock:
                 return "changed 1"
 
-        return 'content 1'
+        return "content 1"
 
-    @app.callback(Output('btn-2', 'children'), [Input('btn-1', 'n_clicks')])
+    @app.callback(Output("btn-2", "children"), [Input("btn-1", "n_clicks")])
     def updateDiv(n_clicks):
         if n_clicks is not None:
             with lock:
                 return "changed 2"
 
-        return 'content 2'
+        return "content 2"
 
     dash_dcc.start_server(app)
 
-    dash_dcc.wait_for_text_to_equal('#btn-1', "content 1")
-    dash_dcc.wait_for_text_to_equal('#btn-2', "content 2")
+    dash_dcc.wait_for_text_to_equal("#btn-1", "content 1")
+    dash_dcc.wait_for_text_to_equal("#btn-2", "content 2")
 
     with lock:
-        dash_dcc.find_element('#btn-1').click()
+        dash_dcc.find_element("#btn-1").click()
 
-        dash_dcc.find_element('.loading-2 .dash-spinner')
+        dash_dcc.find_element(".loading-2 .dash-spinner")
         dash_dcc.wait_for_text_to_equal("#btn-2", "")
 
     dash_dcc.wait_for_text_to_equal("#btn-2", "changed 2")
 
     with lock:
-        dash_dcc.find_element('#btn-2').click()
+        dash_dcc.find_element("#btn-2").click()
 
-        dash_dcc.find_element('.loading-1 .dash-spinner')
+        dash_dcc.find_element(".loading-1 .dash-spinner")
         dash_dcc.wait_for_text_to_equal("#btn-1", "")
 
     dash_dcc.wait_for_text_to_equal("#btn-1", "changed 1")
@@ -118,46 +121,52 @@ def test_ldcp004_nested_loading_components(dash_dcc):
 
     app = dash.Dash(__name__)
 
-    app.layout = html.Div([
-        dcc.Loading([
-            html.Button(id='btn-1'),
-            dcc.Loading([html.Button(id='btn-2')], className='loading-2')
-        ], className='loading-1')
-    ], id='root')
-
-    @app.callback(Output('btn-1', 'children'), [Input('btn-2', 'n_clicks')])
+    app.layout = html.Div(
+        [
+            dcc.Loading(
+                [
+                    html.Button(id="btn-1"),
+                    dcc.Loading([html.Button(id="btn-2")], className="loading-2"),
+                ],
+                className="loading-1",
+            )
+        ],
+        id="root",
+    )
+
+    @app.callback(Output("btn-1", "children"), [Input("btn-2", "n_clicks")])
     def updateDiv(n_clicks):
         if n_clicks is not None:
             with lock:
                 return "changed 1"
 
-        return 'content 1'
+        return "content 1"
 
-    @app.callback(Output('btn-2', 'children'), [Input('btn-1', 'n_clicks')])
+    @app.callback(Output("btn-2", "children"), [Input("btn-1", "n_clicks")])
     def updateDiv(n_clicks):
         if n_clicks is not None:
             with lock:
                 return "changed 2"
 
-        return 'content 2'
+        return "content 2"
 
     dash_dcc.start_server(app)
 
-    dash_dcc.wait_for_text_to_equal('#btn-1', "content 1")
-    dash_dcc.wait_for_text_to_equal('#btn-2', "content 2")
+    dash_dcc.wait_for_text_to_equal("#btn-1", "content 1")
+    dash_dcc.wait_for_text_to_equal("#btn-2", "content 2")
 
     with lock:
-        dash_dcc.find_element('#btn-1').click()
+        dash_dcc.find_element("#btn-1").click()
 
-        dash_dcc.find_element('.loading-2 .dash-spinner')
+        dash_dcc.find_element(".loading-2 .dash-spinner")
         dash_dcc.wait_for_text_to_equal("#btn-2", "")
 
     dash_dcc.wait_for_text_to_equal("#btn-2", "changed 2")
 
     with lock:
-        dash_dcc.find_element('#btn-2').click()
+        dash_dcc.find_element("#btn-2").click()
 
-        dash_dcc.find_element('.loading-1 .dash-spinner')
+        dash_dcc.find_element(".loading-1 .dash-spinner")
         dash_dcc.wait_for_text_to_equal("#btn-1", "")
 
     dash_dcc.wait_for_text_to_equal("#btn-1", "changed 1")
@@ -170,20 +179,22 @@ def test_ldcp005_dynamic_loading_component(dash_dcc):
 
     app = dash.Dash(__name__, suppress_callback_exceptions=True)
 
-    app.layout = html.Div([html.Button(id='btn-1'), html.Div(id='div-1')])
+    app.layout = html.Div([html.Button(id="btn-1"), html.Div(id="div-1")])
 
-    @app.callback(Output('div-1', 'children'), [Input('btn-1', 'n_clicks')])
+    @app.callback(Output("div-1", "children"), [Input("btn-1", "n_clicks")])
     def updateDiv(n_clicks):
         if n_clicks is None:
             return
 
         with lock:
-            return html.Div([
-                html.Button(id='btn-2'),
-                dcc.Loading([html.Button(id='btn-3')], className='loading-1')
-            ])
-
-    @app.callback(Output('btn-3', 'children'), [Input('btn-2', 'n_clicks')])
+            return html.Div(
+                [
+                    html.Button(id="btn-2"),
+                    dcc.Loading([html.Button(id="btn-3")], className="loading-1"),
+                ]
+            )
+
+    @app.callback(Output("btn-3", "children"), [Input("btn-2", "n_clicks")])
     def updateDynamic(n_clicks):
         if n_clicks is None:
             return "content"
@@ -193,20 +204,20 @@ def updateDynamic(n_clicks):
 
     dash_dcc.start_server(app)
 
-    dash_dcc.find_element('#btn-1')
-    dash_dcc.wait_for_text_to_equal('#div-1', "")
+    dash_dcc.find_element("#btn-1")
+    dash_dcc.wait_for_text_to_equal("#div-1", "")
 
-    dash_dcc.find_element('#btn-1').click()
+    dash_dcc.find_element("#btn-1").click()
 
-    dash_dcc.find_element('#div-1 #btn-2')
-    dash_dcc.wait_for_text_to_equal('#btn-3', "content")
+    dash_dcc.find_element("#div-1 #btn-2")
+    dash_dcc.wait_for_text_to_equal("#btn-3", "content")
 
     with lock:
-        dash_dcc.find_element('#btn-2').click()
+        dash_dcc.find_element("#btn-2").click()
 
-        dash_dcc.find_element('.loading-1 .dash-spinner')
-        dash_dcc.wait_for_text_to_equal('#btn-3', "")
+        dash_dcc.find_element(".loading-1 .dash-spinner")
+        dash_dcc.wait_for_text_to_equal("#btn-3", "")
 
-    dash_dcc.wait_for_text_to_equal('#btn-3', "changed")
+    dash_dcc.wait_for_text_to_equal("#btn-3", "changed")
 
     assert not dash_dcc.get_logs()

From 26c6533bdf94d08611c7289dda7a9c4c555e888d Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 16:20:41 -0400
Subject: [PATCH 17/20] test that children retain identity inside loading
 components

---
 .../loading/test_loading_component.py         | 45 +++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/tests/integration/loading/test_loading_component.py b/tests/integration/loading/test_loading_component.py
index 7b83d512e..b3b9b32d3 100644
--- a/tests/integration/loading/test_loading_component.py
+++ b/tests/integration/loading/test_loading_component.py
@@ -221,3 +221,48 @@ def updateDynamic(n_clicks):
     dash_dcc.wait_for_text_to_equal("#btn-3", "changed")
 
     assert not dash_dcc.get_logs()
+
+
+def test_ldcp006_children_identity(dash_dcc):
+    lock = Lock()
+
+    app = dash.Dash(__name__)
+    app.layout = html.Div([
+        html.Button("click", id="btn"),
+        dcc.Loading(dcc.Graph(id="graph"), className="loading")
+    ])
+
+    @app.callback(Output("graph", "figure"), [Input("btn", "n_clicks")])
+    def update_graph(n):
+        with lock:
+            bars = list(range(2, (n or 0) + 5))
+            return {
+                "data": [{"type": "bar", "x": bars, "y": bars}],
+                "layout": {"width": 400, "height": 400}
+            }
+
+    with lock:
+        dash_dcc.start_server(app)
+        dash_dcc.find_element(".loading .dash-spinner")
+        dash_dcc.find_element("#graph .js-plotly-plot")
+        dash_dcc.driver.execute_script(
+            "window.gd = document.querySelector('.js-plotly-plot');"
+            "window.gd.__test__ = 'boo';"
+        )
+
+    test_identity = (
+        "var gd_ = document.querySelector('.js-plotly-plot');"
+        "return gd_ === window.gd && gd_.__test__ === 'boo';"
+    )
+
+    assert len(dash_dcc.find_elements('.js-plotly-plot .bars path')) == 3
+    assert dash_dcc.driver.execute_script(test_identity)
+
+    with lock:
+        dash_dcc.find_element("#btn").click()
+        dash_dcc.find_element(".loading .dash-spinner")
+        assert len(dash_dcc.find_elements('.js-plotly-plot .bars path')) == 3
+        assert dash_dcc.driver.execute_script(test_identity)
+
+    assert len(dash_dcc.find_elements('.js-plotly-plot .bars path')) == 4
+    assert dash_dcc.driver.execute_script(test_identity)

From a80f0db0980a5e4321933e2f8d2f95727712c02a Mon Sep 17 00:00:00 2001
From: alexcjohnson <johnson.alex.c@gmail.com>
Date: Thu, 9 Apr 2020 17:04:53 -0400
Subject: [PATCH 18/20] Update CHANGELOG.md

Co-Authored-By: Chris Parmer <chris@plot.ly>
---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c0213e9bf..18a8e3f13 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 ### Changed
-- [#740](https://github.com/plotly/dash-core-components/pull/740) Keep components that are loading in the DOM, but not visible, as opposed to removing them entirely
+- [#740](https://github.com/plotly/dash-core-components/pull/740) Keep components that are loading in the DOM, but not visible, as opposed to removing them entirely. This will ensure that the size of the component's container does not shrink or expand when the component goes into the loading state.
 
 ### Fixed
 - [#740](https://github.com/plotly/dash-core-components/pull/740) Fixed bug in which mapbox `uirevision` was not behaving when inside a `dcc.Loading` component

From 4fc809a6c1328f922c0eddff315adc1bf79bd680 Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 17:18:06 -0400
Subject: [PATCH 19/20] include computed visibility in the loading/graph test

---
 .../loading/test_loading_component.py         | 28 +++++++++++++------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/tests/integration/loading/test_loading_component.py b/tests/integration/loading/test_loading_component.py
index b3b9b32d3..905100c11 100644
--- a/tests/integration/loading/test_loading_component.py
+++ b/tests/integration/loading/test_loading_component.py
@@ -227,10 +227,12 @@ def test_ldcp006_children_identity(dash_dcc):
     lock = Lock()
 
     app = dash.Dash(__name__)
-    app.layout = html.Div([
-        html.Button("click", id="btn"),
-        dcc.Loading(dcc.Graph(id="graph"), className="loading")
-    ])
+    app.layout = html.Div(
+        [
+            html.Button("click", id="btn"),
+            dcc.Loading(dcc.Graph(id="graph"), className="loading"),
+        ]
+    )
 
     @app.callback(Output("graph", "figure"), [Input("btn", "n_clicks")])
     def update_graph(n):
@@ -238,9 +240,15 @@ def update_graph(n):
             bars = list(range(2, (n or 0) + 5))
             return {
                 "data": [{"type": "bar", "x": bars, "y": bars}],
-                "layout": {"width": 400, "height": 400}
+                "layout": {"width": 400, "height": 400},
             }
 
+    def get_graph_visibility():
+        return dash_dcc.driver.execute_script(
+            "var gd_ = document.querySelector('.js-plotly-plot');"
+            "return getComputedStyle(gd_).visibility;"
+        )
+
     with lock:
         dash_dcc.start_server(app)
         dash_dcc.find_element(".loading .dash-spinner")
@@ -249,20 +257,24 @@ def update_graph(n):
             "window.gd = document.querySelector('.js-plotly-plot');"
             "window.gd.__test__ = 'boo';"
         )
+        assert get_graph_visibility() == "hidden"
 
     test_identity = (
         "var gd_ = document.querySelector('.js-plotly-plot');"
         "return gd_ === window.gd && gd_.__test__ === 'boo';"
     )
 
-    assert len(dash_dcc.find_elements('.js-plotly-plot .bars path')) == 3
+    assert len(dash_dcc.find_elements(".js-plotly-plot .bars path")) == 3
     assert dash_dcc.driver.execute_script(test_identity)
+    assert get_graph_visibility() == "visible"
 
     with lock:
         dash_dcc.find_element("#btn").click()
         dash_dcc.find_element(".loading .dash-spinner")
-        assert len(dash_dcc.find_elements('.js-plotly-plot .bars path')) == 3
+        assert len(dash_dcc.find_elements(".js-plotly-plot .bars path")) == 3
         assert dash_dcc.driver.execute_script(test_identity)
+        assert get_graph_visibility() == "hidden"
 
-    assert len(dash_dcc.find_elements('.js-plotly-plot .bars path')) == 4
+    assert len(dash_dcc.find_elements(".js-plotly-plot .bars path")) == 4
     assert dash_dcc.driver.execute_script(test_identity)
+    assert get_graph_visibility() == "visible"

From 2b41ea0d3588486a9e38a9b30e7020c3aad34da4 Mon Sep 17 00:00:00 2001
From: alexcjohnson <alex@plot.ly>
Date: Thu, 9 Apr 2020 17:32:13 -0400
Subject: [PATCH 20/20] robustify store test_data_lifecycle

---
 tests/integration/store/test_data_lifecycle.py | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/tests/integration/store/test_data_lifecycle.py b/tests/integration/store/test_data_lifecycle.py
index d42b76dd9..976547ee3 100644
--- a/tests/integration/store/test_data_lifecycle.py
+++ b/tests/integration/store/test_data_lifecycle.py
@@ -1,3 +1,6 @@
+import dash.testing.wait as wait
+
+
 def test_stdl001_data_lifecycle_with_different_condition(store_app, dash_dcc):
     dash_dcc.start_server(store_app)
 
@@ -31,7 +34,7 @@ def test_stdl001_data_lifecycle_with_different_condition(store_app, dash_dcc):
     ), "memory storage should contain the initial data in new tab"
 
     dash_dcc.multiple_click("#btn", 2)
-    assert dash_dcc.get_session_storage() == {"n_clicks": 2}
+    wait.until(lambda: dash_dcc.get_session_storage() == {"n_clicks": 2}, timeout=1)
     assert (
         '"n_clicks": 2' in dash_dcc.wait_for_element("#output").text
     ), "memory storage should reflect to the new clicks"