Merge pull request #3066 from plotly/fix/wrapper

Improve performance of context components re-rendering

Author: T4rk1n

@plotly/dash-generator-test-component-typescript/src/props.ts

@@ -25,6 +25,7 @@ export type TypescriptComponentProps = {
     array_obj?: {a: string}[];
     array_any?: any[];
     enum_string?: 'one' | 'two';
+    enum_number?: 2 | 3 | 4 | 5 | 6;
     union?: number | string;
     union_shape?: {a: string} | string;
     array_union_shape?: ({a: string} | string)[];

@plotly/dash-test-components/src/components/AddPropsComponent.js

@@ -7,9 +7,8 @@ const AddPropsComponent = (props) => {
 
     return (
         <div id={id}>
-            {React.cloneElement(children, {
+            {React.cloneElement(children, { 
                 receive: `Element #${id} pass`,
-                id: id,
             })}
         </div>
     );

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

@@ -1,7 +1,9 @@
 import PropTypes from 'prop-types';
 import {append, includes, without} from 'ramda';
 import React, {Component} from 'react';
+
 import {sanitizeOptions} from '../utils/optionTypes';
+import LoadingElement from '../utils/LoadingElement';
 
 /**
  * Checklist is a component that encapsulates several checkboxes.
@@ -21,19 +23,11 @@ export default class Checklist extends Component {
             options,
             setProps,
             style,
-            loading_state,
             value,
             inline,
         } = this.props;
         return (
-            <div
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
-                id={id}
-                style={style}
-                className={className}
-            >
+            <LoadingElement id={id} style={style} className={className}>
                 {sanitizeOptions(options).map(option => {
                     return (
                         <label
@@ -67,7 +61,7 @@ export default class Checklist extends Component {
                         </label>
                     );
                 })}
-            </div>
+            </LoadingElement>
         );
     }
 }
@@ -192,24 +186,6 @@ Checklist.propTypes = {
      */
     setProps: PropTypes.func,
 
-    /**
-     * Object that holds the loading state object coming from dash-renderer
-     */
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string,
-    }),
-
     /**
      * Used to allow user interactions in this component to be persisted when
      * the component - or the page - is refreshed. If `persisted` is truthy and

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

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
 import {faCopy, faCheckCircle} from '@fortawesome/free-regular-svg-icons';
 
+import LoadingElement from '../utils/LoadingElement';
+
 const clipboardAPI = navigator.clipboard;
 
 function wait(ms) {
@@ -14,6 +16,8 @@ function wait(ms) {
  */
 
 export default class Clipboard extends React.Component {
+    static contextType = window.dash_component_api.DashContext;
+
     constructor(props) {
         super(props);
         this.copyToClipboard = this.copyToClipboard.bind(this);
@@ -96,7 +100,7 @@ export default class Clipboard extends React.Component {
     }
 
     async loading() {
-        while (this.props.loading_state?.is_loading) {
+        while (this.context.isLoading()) {
             await wait(100);
         }
     }
@@ -124,24 +128,21 @@ export default class Clipboard extends React.Component {
     }
 
     render() {
-        const {id, title, className, style, loading_state} = this.props;
+        const {id, title, className, style} = this.props;
         const copyIcon = <FontAwesomeIcon icon={faCopy} />;
         const copiedIcon = <FontAwesomeIcon icon={faCheckCircle} />;
         const btnIcon = this.state.copied ? copiedIcon : copyIcon;
 
         return clipboardAPI ? (
-            <div
+            <LoadingElement
                 id={id}
                 title={title}
                 style={style}
                 className={className}
                 onClick={this.onClickHandler}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
             >
                 <i> {btnIcon}</i>
-            </div>
+            </LoadingElement>
         ) : null;
     }
 }
@@ -196,24 +197,6 @@ Clipboard.propTypes = {
      */
     className: PropTypes.string,
 
-    /**
-     * Object that holds the loading state object coming from dash-renderer
-     */
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string,
-    }),
-
     /**
      * Dash-assigned callback that gets fired when the value changes.
      */

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

@@ -1,8 +1,8 @@
-import {clone} from 'ramda';
 import React from 'react';
 import PropTypes from 'prop-types';
 
 import ConfirmDialog from './ConfirmDialog.react';
+import LoadingElement from '../utils/LoadingElement';
 
 /**
  * A wrapper component that will display a confirmation dialog
@@ -18,30 +18,21 @@ import ConfirmDialog from './ConfirmDialog.react';
  */
 export default class ConfirmDialogProvider extends React.Component {
     render() {
-        const {displayed, id, setProps, children, loading_state} = this.props;
+        const {displayed, id, setProps, children} = this.props;
 
         // Will lose the previous onClick of the child
-        const wrapClick = child => {
-            const props = clone(child.props);
-            props._dashprivate_layout.props.onClick = () => {
-                setProps({displayed: true});
-            };
-
-            return React.cloneElement(child, props);
-        };
+        const wrapClick = child =>
+            React.cloneElement(child, {
+                onClick: () => setProps({displayed: true}),
+            });
 
         return (
-            <div
-                id={id}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
-            >
+            <LoadingElement id={id}>
                 {Array.isArray(children)
                     ? children.map(wrapClick)
                     : wrapClick(children)}
                 <ConfirmDialog {...this.props} displayed={displayed} />
-            </div>
+            </LoadingElement>
         );
     }
 }
@@ -94,22 +85,4 @@ ConfirmDialogProvider.propTypes = {
      * The children to hijack clicks from and display the popup.
      */
     children: PropTypes.any,
-
-    /**
-     * Object that holds the loading state object coming from dash-renderer
-     */
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string,
-    }),
 };

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

@@ -222,24 +222,6 @@ DatePickerRange.propTypes = {
      */
     setProps: PropTypes.func,
 
-    /**
-     * Object that holds the loading state object coming from dash-renderer
-     */
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string,
-    }),
-
     /**
      * Used to allow user interactions in this component to be persisted when
      * the component - or the page - is refreshed. If `persisted` is truthy and

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

@@ -181,24 +181,6 @@ DatePickerSingle.propTypes = {
      */
     setProps: PropTypes.func,
 
-    /**
-     * Object that holds the loading state object coming from dash-renderer
-     */
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string,
-    }),
-
     /**
      * Used to allow user interactions in this component to be persisted when
      * the component - or the page - is refreshed. If `persisted` is truthy and

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

@@ -177,24 +177,6 @@ Dropdown.propTypes = {
      */
     setProps: PropTypes.func,
 
-    /**
-     * Object that holds the loading state object coming from dash-renderer
-     */
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string,
-    }),
-
     /**
      * Used to allow user interactions in this component to be persisted when
      * the component - or the page - is refreshed. If `persisted` is truthy and

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

@@ -556,24 +556,6 @@ PlotlyGraph.propTypes = {
      * Function that updates the state tree.
      */
     setProps: PropTypes.func,
-
-    /**
-     * Object that holds the loading state object coming from dash-renderer
-     */
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string,
-    }),
 };
 
 ControlledPlotlyGraph.propTypes = PlotlyGraph.propTypes;

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

@@ -3,6 +3,7 @@ import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 import isNumeric from 'fast-isnumeric';
 import './css/input.css';
+import LoadingElement from '../utils/LoadingElement';
 
 // eslint-disable-next-line no-implicit-coercion
 const convert = val => (isNumeric(val) ? +val : NaN);
@@ -94,14 +95,11 @@ export default class Input extends PureComponent {
     render() {
         const valprops =
             this.props.type === 'number' ? {} : {value: this.state.value};
-        const {loading_state} = this.props;
         let {className} = this.props;
         className = 'dash-input' + (className ? ` ${className}` : '');
         return (
-            <input
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
+            <LoadingElement
+                elementType={'input'}
                 className={className}
                 ref={this.input}
                 onBlur={this.onBlur}
@@ -471,24 +469,6 @@ Input.propTypes = {
      */
     setProps: PropTypes.func,
 
-    /**
-     * Object that holds the loading state object coming from dash-renderer
-     */
-    loading_state: PropTypes.shape({
-        /**
-         * Determines if the component is loading or not
-         */
-        is_loading: PropTypes.bool,
-        /**
-         * Holds which property is loading
-         */
-        prop_name: PropTypes.string,
-        /**
-         * Holds the name of the component that is loading
-         */
-        component_name: PropTypes.string,
-    }),
-
     /**
      * Used to allow user interactions in this component to be persisted when
      * the component - or the page - is refreshed. If `persisted` is truthy and