From cea5aba02ca94598bc3c198cebfb815839bdf7e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Rivet?=
 <Marc-Andre-Rivet@users.noreply.github.com>
Date: Thu, 24 Sep 2020 09:49:25 -0400
Subject: [PATCH] `setProps` and `rendered` event ordering causing unsent
 callbacks (#1415)

---
 @plotly/dash-test-components/babel.config.js  |  6 ++-
 .../dash-test-components/package-lock.json    | 12 +++++
 @plotly/dash-test-components/package.json     |  3 ++
 .../src/components/AsyncComponent.js          | 19 ++++++++
 .../src/components/CollapseComponent.js       | 18 +++++++
 .../src/components/DelayedEventComponent.js   | 18 +++++++
 .../src/components/FragmentComponent.js       | 15 ++++++
 .../src/fragments/AsyncComponent.js           | 19 ++++++++
 .../src/fragments/AsyncComponentLoader.js     |  1 +
 @plotly/dash-test-components/src/index.js     | 12 ++++-
 .../dash-test-components/webpack.config.js    | 22 ++++++++-
 CHANGELOG.md                                  |  4 ++
 dash-renderer/src/TreeContainer.js            | 16 +++----
 .../callbacks/test_basic_callback.py          | 47 ++++++++++++++++++-
 14 files changed, 200 insertions(+), 12 deletions(-)
 create mode 100644 @plotly/dash-test-components/src/components/AsyncComponent.js
 create mode 100644 @plotly/dash-test-components/src/components/CollapseComponent.js
 create mode 100644 @plotly/dash-test-components/src/components/DelayedEventComponent.js
 create mode 100644 @plotly/dash-test-components/src/components/FragmentComponent.js
 create mode 100644 @plotly/dash-test-components/src/fragments/AsyncComponent.js
 create mode 100644 @plotly/dash-test-components/src/fragments/AsyncComponentLoader.js

diff --git a/@plotly/dash-test-components/babel.config.js b/@plotly/dash-test-components/babel.config.js
index 37c94a310f..dcf4bdf555 100644
--- a/@plotly/dash-test-components/babel.config.js
+++ b/@plotly/dash-test-components/babel.config.js
@@ -3,4 +3,8 @@ const presets = [
     '@babel/preset-react'
 ];
 
-module.exports = { presets };
+const plugins = [
+    '@babel/plugin-syntax-dynamic-import'
+];
+
+module.exports = { presets, plugins };
diff --git a/@plotly/dash-test-components/package-lock.json b/@plotly/dash-test-components/package-lock.json
index e99d73699c..b97ea9647d 100644
--- a/@plotly/dash-test-components/package-lock.json
+++ b/@plotly/dash-test-components/package-lock.json
@@ -1177,6 +1177,18 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@plotly/dash-component-plugins": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@plotly/dash-component-plugins/-/dash-component-plugins-1.2.0.tgz",
+      "integrity": "sha512-HnDyE5b1oh5l6vkZ/cd1Z/b7E4GeANLTMEeDom4WIeBYcJ/fH2PBAytZzgHXNsDYDJrMRPgfyiC7Y7jBIW4edA==",
+      "dev": true
+    },
+    "@plotly/webpack-dash-dynamic-import": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@plotly/webpack-dash-dynamic-import/-/webpack-dash-dynamic-import-1.1.5.tgz",
+      "integrity": "sha512-WvICYMoUgL3Gk6v2xwcF+zge8fRQ6DjpftVgtFflScdsek+B0LjydTU5EKCo8180pIUJE5WqHmSO+wYlw+a3mw==",
+      "dev": true
+    },
     "@types/json-schema": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
diff --git a/@plotly/dash-test-components/package.json b/@plotly/dash-test-components/package.json
index 7af18b1e0a..bd6ebb27ad 100644
--- a/@plotly/dash-test-components/package.json
+++ b/@plotly/dash-test-components/package.json
@@ -22,8 +22,11 @@
   "devDependencies": {
     "@babel/cli": "^7.4.0",
     "@babel/core": "^7.4.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/preset-env": "^7.4.1",
     "@babel/preset-react": "^7.0.0",
+    "@plotly/dash-component-plugins": "^1.2.0",
+    "@plotly/webpack-dash-dynamic-import": "^1.1.5",
     "babel-loader": "^8.0.5",
     "npm-run-all": "^4.1.5",
     "react": "16.13.0",
diff --git a/@plotly/dash-test-components/src/components/AsyncComponent.js b/@plotly/dash-test-components/src/components/AsyncComponent.js
new file mode 100644
index 0000000000..702dc1538e
--- /dev/null
+++ b/@plotly/dash-test-components/src/components/AsyncComponent.js
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import React, { Suspense } from 'react';
+import { asyncDecorator } from '@plotly/dash-component-plugins';
+import asyncComponentLoader from './../fragments/AsyncComponentLoader';
+
+const AsyncComponent = props => (<Suspense fallback={null}>
+    <RealAsyncComponent {...props} />
+</Suspense>);
+
+const RealAsyncComponent = asyncDecorator(AsyncComponent, asyncComponentLoader);
+
+AsyncComponent.propTypes = {
+    id: PropTypes.string,
+    value: PropTypes.string
+};
+
+AsyncComponent.defaultProps = {};
+
+export default AsyncComponent;
\ No newline at end of file
diff --git a/@plotly/dash-test-components/src/components/CollapseComponent.js b/@plotly/dash-test-components/src/components/CollapseComponent.js
new file mode 100644
index 0000000000..ce9260215d
--- /dev/null
+++ b/@plotly/dash-test-components/src/components/CollapseComponent.js
@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+
+const CollapseComponent = props => (<Fragment>
+    {display ? props.children : null}
+</Fragment>);
+
+CollapseComponent.propTypes = {
+    children: PropTypes.node,
+    display: PropTypes.bool,
+    id: PropTypes.string
+};
+
+CollapseComponent.defaultProps = {
+    display: false
+};
+
+export default CollapseComponent;
\ No newline at end of file
diff --git a/@plotly/dash-test-components/src/components/DelayedEventComponent.js b/@plotly/dash-test-components/src/components/DelayedEventComponent.js
new file mode 100644
index 0000000000..d83f658f48
--- /dev/null
+++ b/@plotly/dash-test-components/src/components/DelayedEventComponent.js
@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const DelayedEventComponent = ({ id, n_clicks, setProps }) => (<button
+    id={id}
+    onClick={() => setTimeout(() => setProps({ n_clicks: n_clicks + 1 }), 20)}
+/>);
+
+DelayedEventComponent.propTypes = {
+    id: PropTypes.string,
+    n_clicks: PropTypes.number
+};
+
+DelayedEventComponent.defaultProps = {
+    n_clicks: 0
+};
+
+export default DelayedEventComponent;
\ No newline at end of file
diff --git a/@plotly/dash-test-components/src/components/FragmentComponent.js b/@plotly/dash-test-components/src/components/FragmentComponent.js
new file mode 100644
index 0000000000..89a6421e2f
--- /dev/null
+++ b/@plotly/dash-test-components/src/components/FragmentComponent.js
@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+
+const FragmentComponent = props => (<Fragment>
+    {props.children}
+</Fragment>);
+
+FragmentComponent.propTypes = {
+    children: PropTypes.node,
+    id: PropTypes.string
+};
+
+FragmentComponent.defaultProps = {};
+
+export default FragmentComponent;
\ No newline at end of file
diff --git a/@plotly/dash-test-components/src/fragments/AsyncComponent.js b/@plotly/dash-test-components/src/fragments/AsyncComponent.js
new file mode 100644
index 0000000000..810efa3de6
--- /dev/null
+++ b/@plotly/dash-test-components/src/fragments/AsyncComponent.js
@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+import { asyncDecorator } from '@plotly/dash-component-plugins';
+
+/**
+ * MyComponent description
+ */
+const AsyncComponent = ({ value }) => (<Fragment>
+    {value}
+</Fragment>);
+
+AsyncComponent.propTypes = {
+    id: PropTypes.string,
+    value: PropTypes.string
+};
+
+AsyncComponent.defaultProps = {};
+
+export default AsyncComponent;
\ No newline at end of file
diff --git a/@plotly/dash-test-components/src/fragments/AsyncComponentLoader.js b/@plotly/dash-test-components/src/fragments/AsyncComponentLoader.js
new file mode 100644
index 0000000000..7718b1976f
--- /dev/null
+++ b/@plotly/dash-test-components/src/fragments/AsyncComponentLoader.js
@@ -0,0 +1 @@
+export default () => import('./AsyncComponent');
diff --git a/@plotly/dash-test-components/src/index.js b/@plotly/dash-test-components/src/index.js
index f9752fc6a2..249c9d2aec 100644
--- a/@plotly/dash-test-components/src/index.js
+++ b/@plotly/dash-test-components/src/index.js
@@ -1,8 +1,18 @@
+import AsyncComponent from './components/AsyncComponent';
+import CollapseComponent from './components/CollapseComponent';
+import DelayedEventComponent from './components/DelayedEventComponent';
+import FragmentComponent from './components/FragmentComponent';
 import StyledComponent from './components/StyledComponent';
 import MyPersistedComponent from './components/MyPersistedComponent';
 import MyPersistedComponentNested from './components/MyPersistedComponentNested';
 
 
 export {
-    StyledComponent, MyPersistedComponent, MyPersistedComponentNested
+    AsyncComponent,
+    CollapseComponent,
+    DelayedEventComponent,
+    FragmentComponent,
+    MyPersistedComponent,
+    MyPersistedComponentNested,
+    StyledComponent
 };
diff --git a/@plotly/dash-test-components/webpack.config.js b/@plotly/dash-test-components/webpack.config.js
index 391fe37466..1169e78722 100644
--- a/@plotly/dash-test-components/webpack.config.js
+++ b/@plotly/dash-test-components/webpack.config.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const WebpackDashDynamicImport = require('@plotly/webpack-dash-dynamic-import');
 
 const packagejson = require('./package.json');
 
@@ -14,6 +15,7 @@ module.exports = {
     },
     output: {
         path: path.resolve(__dirname, dashLibraryName),
+        chunkFilename: '[name].js',
         filename: `${dashLibraryName}.js`,
         library: dashLibraryName,
         libraryTarget: 'window',
@@ -28,5 +30,23 @@ module.exports = {
                 }
             }
         ],
-    }
+    },
+    optimization: {
+        splitChunks: {
+            chunks: 'async',
+            name: true,
+            cacheGroups: {
+                async: {
+                    chunks: 'async',
+                    minSize: 0,
+                    name(module, chunks, cacheGroupKey) {
+                        return `${cacheGroupKey}-${chunks[0].name}`;
+                    }
+                }
+            }
+        }
+    },
+    plugins: [
+        new WebpackDashDynamicImport()
+    ]
 };
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 57d38503d4..1fc42ae279 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 All notable changes to `dash` will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+## Unreleased
+### Fixed
+- [#1415](https://github.com/plotly/dash/pull/1415) Fix a regression with some layouts callbacks involving dcc.Tabs, not yet loaded dash_table.DataTable and dcc.Graph to not be called
+
 ## [1.16.1] - 2020-09-16
 ### Changed
 - [#1376](https://github.com/plotly/dash/pull/1376) Extends the `getTransform` logic in the renderer to handle `persistenceTransforms` for both nested and non-nested persisted props. This was used to to fix [dcc#700](https://github.com/plotly/dash-core-components/issues/700) in conjunction with [dcc#854](https://github.com/plotly/dash-core-components/pull/854) by using persistenceTransforms to strip the time part of the datetime so that datepickers can persist when defined in callbacks.
diff --git a/dash-renderer/src/TreeContainer.js b/dash-renderer/src/TreeContainer.js
index 7c2ef9efbe..28d5936e78 100644
--- a/dash-renderer/src/TreeContainer.js
+++ b/dash-renderer/src/TreeContainer.js
@@ -138,14 +138,6 @@ class BaseTreeContainer extends Component {
             // for persistence
             recordUiEdit(_dashprivate_layout, newProps, _dashprivate_dispatch);
 
-            // Always update this component's props
-            _dashprivate_dispatch(
-                updateProps({
-                    props: changedProps,
-                    itempath: _dashprivate_path
-                })
-            );
-
             // Only dispatch changes to Dash if a watched prop changed
             if (watchedKeys.length) {
                 _dashprivate_dispatch(
@@ -155,6 +147,14 @@ class BaseTreeContainer extends Component {
                     })
                 );
             }
+
+            // Always update this component's props
+            _dashprivate_dispatch(
+                updateProps({
+                    props: changedProps,
+                    itempath: _dashprivate_path
+                })
+            );
         }
     }
 
diff --git a/tests/integration/callbacks/test_basic_callback.py b/tests/integration/callbacks/test_basic_callback.py
index afbd81cd97..693b1ea147 100644
--- a/tests/integration/callbacks/test_basic_callback.py
+++ b/tests/integration/callbacks/test_basic_callback.py
@@ -1,12 +1,17 @@
 import json
 from multiprocessing import Lock, Value
-
 import pytest
 
 import dash_core_components as dcc
 import dash_html_components as html
 import dash_table
 import dash
+from dash_test_components import (
+    AsyncComponent,
+    CollapseComponent,
+    DelayedEventComponent,
+    FragmentComponent,
+)
 from dash.dependencies import Input, Output, State
 from dash.exceptions import PreventUpdate
 from dash.testing import wait
@@ -404,3 +409,43 @@ def update_text(data):
     assert input_call_count.value == 2 + len("hello world")
 
     assert not dash_duo.get_logs()
+
+
+def test_cbsc009_callback_using_unloaded_async_component_and_graph(dash_duo):
+    app = dash.Dash(__name__)
+    app.layout = FragmentComponent(
+        [
+            CollapseComponent([AsyncComponent(id="async", value="A")]),
+            html.Button("n", id="n"),
+            DelayedEventComponent(id="d"),
+            html.Div("Output init", id="output"),
+        ]
+    )
+
+    @app.callback(
+        Output("output", "children"),
+        Input("n", "n_clicks"),
+        Input("d", "n_clicks"),
+        Input("async", "value"),
+    )
+    def content(n, d, v):
+        return json.dumps([n, d, v])
+
+    dash_duo.start_server(app)
+
+    wait.until(lambda: dash_duo.find_element("#output").text == '[null, null, "A"]', 3)
+    dash_duo.wait_for_element("#d").click()
+
+    wait.until(
+        lambda: dash_duo.find_element("#output").text == '[null, 1, "A"]', 3,
+    )
+
+    dash_duo.wait_for_element("#n").click()
+    wait.until(
+        lambda: dash_duo.find_element("#output").text == '[1, 1, "A"]', 3,
+    )
+
+    dash_duo.wait_for_element("#d").click()
+    wait.until(
+        lambda: dash_duo.find_element("#output").text == '[1, 2, "A"]', 3,
+    )