Rework loading component

Author: T4rk1n

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

@@ -1,5 +1,7 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useState, useRef, useMemo, useEffect} from 'react';
+import {equals, concat, includes, toPairs} from 'ramda';
 import PropTypes from 'prop-types';
+
 import GraphSpinner from '../fragments/Loading/spinners/GraphSpinner.jsx';
 import DefaultSpinner from '../fragments/Loading/spinners/DefaultSpinner.jsx';
 import CubeSpinner from '../fragments/Loading/spinners/CubeSpinner.jsx';
@@ -16,12 +18,51 @@ const spinnerComponentOptions = {
 const getSpinner = spinnerType =>
     spinnerComponentOptions[spinnerType] || DefaultSpinner;
 
-/**
- * A Loading component that wraps any other component and displays a spinner until the wrapped component has rendered.
- */
-const Loading = ({
+const coveringSpinner = {
+    visibility: 'visible',
+    position: 'absolute',
+    top: '0',
+    height: '100%',
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+
+const loadingSelector = (componentPath, targetComponents) => state => {
+    let stringPath = JSON.stringify(componentPath);
+    // Remove the last ] for easy match
+    stringPath = stringPath.substring(0, stringPath.length - 1);
+    const loadingChildren = toPairs(state.loading).reduce(
+        (acc, [path, load]) => {
+            if (path.startsWith(stringPath)) {
+                if (targetComponents) {
+                    const target = targetComponents[load.id];
+                    if (!target) {
+                        return acc;
+                    }
+                    if (Array.isArray(target)) {
+                        if (!includes(load.property, target)) {
+                            return acc;
+                        }
+                    } else if (load.property !== target) {
+                        return acc;
+                    }
+                }
+                return concat(acc, load);
+            }
+            return acc;
+        },
+        []
+    );
+    if (loadingChildren.length) {
+        return loadingChildren;
+    }
+    return null;
+};
+
+function Loading({
     children,
-    loading_state,
     display = 'auto',
     color = '#119DFF',
     id,
@@ -38,91 +79,60 @@ const Loading = ({
     delay_show = 0,
     target_components,
     custom_spinner,
-}) => {
-    const coveringSpinner = {
-        visibility: 'visible',
-        position: 'absolute',
-        top: '0',
-        height: '100%',
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-    };
-
-    /* Overrides default Loading behavior if target_components is set. By default,
-     *  Loading fires when any recursive child enters loading state. This makes loading
-     *  opt-in: Loading animation only enabled when one of target components enters loading state.
-     */
-    const isTarget = () => {
-        if (!target_components) {
-            return true;
-        }
-        const isMatchingComponent = () => {
-            return Object.entries(target_components).some(
-                ([component_name, prop_names]) => {
-                    // Convert prop_names to an array if it's not already
-                    const prop_names_array = Array.isArray(prop_names)
-                        ? prop_names
-                        : [prop_names];
-
-                    return (
-                        loading_state.component_name === component_name &&
-                        (prop_names_array.includes('*') ||
-                            prop_names_array.some(
-                                prop_name =>
-                                    loading_state.prop_name === prop_name
-                            ))
-                    );
-                }
-            );
-        };
-        return isMatchingComponent;
-    };
+}) {
+    const ctx = window.dash_component_api.useDashContext();
+    const loading = ctx.useSelector(
+        loadingSelector(ctx.componentPath, target_components),
+        equals
+    );
 
     const [showSpinner, setShowSpinner] = useState(show_initially);
     const dismissTimer = useRef();
     const showTimer = useRef();
 
-    // delay_hide and delay_show is from dash-bootstrap-components dbc.Spinner
+    const containerStyle = useMemo(() => {
+        if (showSpinner) {
+            return {visibility: 'hidden', ...overlay_style, ...parent_style};
+        }
+        return parent_style;
+    }, [showSpinner, parent_style]);
+
     useEffect(() => {
         if (display === 'show' || display === 'hide') {
             setShowSpinner(display === 'show');
             return;
         }
 
-        if (loading_state) {
-            if (loading_state.is_loading) {
-                // if component is currently loading and there's a dismiss timer active
-                // we need to clear it.
-                if (dismissTimer.current) {
-                    dismissTimer.current = clearTimeout(dismissTimer.current);
-                }
-                // if component is currently loading but the spinner is not showing and
-                // there is no timer set to show, then set a timeout to show
-                if (!showSpinner && !showTimer.current) {
-                    showTimer.current = setTimeout(() => {
-                        setShowSpinner(isTarget());
-                        showTimer.current = null;
-                    }, delay_show);
-                }
-            } else {
-                // if component is not currently loading and there's a show timer
-                // active we need to clear it
-                if (showTimer.current) {
-                    showTimer.current = clearTimeout(showTimer.current);
-                }
-                // if component is not currently loading and the spinner is showing and
-                // there's no timer set to dismiss it, then set a timeout to hide it
-                if (showSpinner && !dismissTimer.current) {
-                    dismissTimer.current = setTimeout(() => {
-                        setShowSpinner(false);
-                        dismissTimer.current = null;
-                    }, delay_hide);
-                }
+        if (loading) {
+            // if component is currently loading and there's a dismiss timer active
+            // we need to clear it.
+            if (dismissTimer.current) {
+                dismissTimer.current = clearTimeout(dismissTimer.current);
+            }
+            // if component is currently loading but the spinner is not showing and
+            // there is no timer set to show, then set a timeout to show
+            if (!showSpinner && !showTimer.current) {
+                showTimer.current = setTimeout(() => {
+                    setShowSpinner(true);
+                    showTimer.current = null;
+                }, delay_show);
+            }
+        } else {
+            // if component is not currently loading and there's a show timer
+            // active we need to clear it
+            if (showTimer.current) {
+                showTimer.current = clearTimeout(showTimer.current);
+            }
+            // if component is not currently loading and the spinner is showing and
+            // there's no timer set to dismiss it, then set a timeout to hide it
+            if (showSpinner && !dismissTimer.current) {
+                dismissTimer.current = setTimeout(() => {
+                    setShowSpinner(false);
+                    dismissTimer.current = null;
+                }, delay_hide);
             }
         }
-    }, [delay_hide, delay_show, loading_state, display, showSpinner]);
+    }, [delay_hide, delay_show, loading, display, showSpinner]);
 
     const Spinner = showSpinner && getSpinner(spinnerType);
 
@@ -131,18 +141,7 @@ const Loading = ({
             style={{position: 'relative', ...parent_style}}
             className={parent_className}
         >
-            <div
-                className={parent_className}
-                style={
-                    showSpinner
-                        ? {
-                              visibility: 'hidden',
-                              ...overlay_style,
-                              ...parent_style,
-                          }
-                        : parent_style
-                }
-            >
+            <div className={parent_className} style={containerStyle}>
                 {children}
             </div>
             <div id={id} style={showSpinner ? coveringSpinner : {}}>
@@ -151,7 +150,7 @@ const Loading = ({
                         <Spinner
                             className={className}
                             style={style}
-                            status={loading_state}
+                            status={loading}
                             color={color}
                             debug={debug}
                             fullscreen={fullscreen}
@@ -160,9 +159,7 @@ const Loading = ({
             </div>
         </div>
     );
-};
-
-Loading._dashprivate_isLoadingComponent = true;
+}
 
 Loading.propTypes = {
     /**
@@ -227,24 +224,6 @@ Loading.propTypes = {
      */
     color: 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,
-    }),
-
     /**
      * Setting display to  "show" or "hide"  will override the loading state coming from dash-renderer
      */

components/dash-core-components/src/fragments/Loading/spinners/CircleSpinner.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import DebugTitle from './DebugTitle.jsx';
+
+
 /**
  * Spinner created by Tobias Ahlin, https://github.com/tobiasahlin/SpinKit
  */
@@ -14,12 +17,7 @@ const CircleSpinner = ({
 }) => {
     let debugTitle;
     if (debug) {
-        debugTitle = (
-            <h3 className="dash-loading-title">
-                Loading {status.component_name}
-                's {status.prop_name}
-            </h3>
-        );
+        debugTitle = status.map((s) => <DebugTitle {...s} />);
     }
     let spinnerClass = fullscreen ? 'dash-spinner-container' : '';
     if (className) {
@@ -187,7 +185,7 @@ const CircleSpinner = ({
 };
 
 CircleSpinner.propTypes = {
-    status: PropTypes.object,
+    status: PropTypes.array,
     color: PropTypes.string,
     className: PropTypes.string,
     fullscreen: PropTypes.bool,

components/dash-core-components/src/fragments/Loading/spinners/CubeSpinner.jsx

@@ -2,15 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import changeColor from 'color';
 
+import DebugTitle from './DebugTitle.jsx';
+
+
 const CubeSpinner = ({status, color, fullscreen, debug, className, style}) => {
     let debugTitle;
     if (debug) {
-        debugTitle = (
-            <h3 className="dash-loading-title">
-                Loading {status.component_name}
-                's {status.prop_name}
-            </h3>
-        );
+        debugTitle = status.map((s) => <DebugTitle {...s} />);
     }
     let spinnerClass = fullscreen ? 'dash-spinner-container' : '';
     if (className) {
@@ -189,7 +187,7 @@ const CubeSpinner = ({status, color, fullscreen, debug, className, style}) => {
 };
 
 CubeSpinner.propTypes = {
-    status: PropTypes.object,
+    status: PropTypes.array,
     color: PropTypes.string,
     className: PropTypes.string,
     fullscreen: PropTypes.bool,

components/dash-core-components/src/fragments/Loading/spinners/DebugTitle.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+
+export default function DebugTitle({id, property}) {
+    return (
+        <h3 className="dash-loading-title">
+            Loading #{id}
+            's {property}
+        </h3>
+    )
+} 

components/dash-core-components/src/fragments/Loading/spinners/DefaultSpinner.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import DebugTitle from './DebugTitle.jsx';
+
 /**
  * Spinner created by Tobias Ahlin, https://github.com/tobiasahlin/SpinKit
  */
@@ -14,12 +16,7 @@ const DefaultSpinner = ({
 }) => {
     let debugTitle;
     if (debug) {
-        debugTitle = (
-            <h3 className="dash-loading-title">
-                Loading {status.component_name}
-                's {status.prop_name}
-            </h3>
-        );
+        debugTitle = status.map((s) => <DebugTitle {...s} />);
     }
     let spinnerClass = fullscreen ? 'dash-spinner-container' : '';
     if (className) {
@@ -112,7 +109,7 @@ const DefaultSpinner = ({
 };
 
 DefaultSpinner.propTypes = {
-    status: PropTypes.object,
+    status: PropTypes.array,
     color: PropTypes.string,
     className: PropTypes.string,
     fullscreen: PropTypes.bool,

components/dash-core-components/src/fragments/Loading/spinners/DotSpinner.jsx

@@ -1,18 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import DebugTitle from './DebugTitle.jsx';
+
 /**
  * Spinner created by Tobias Ahlin, https://github.com/tobiasahlin/SpinKit
  */
 const DotSpinner = ({status, color, fullscreen, debug, className, style}) => {
     let debugTitle;
     if (debug) {
-        debugTitle = (
-            <h3 className="dash-loading-title">
-                Loading {status.component_name}
-                's {status.prop_name}
-            </h3>
-        );
+        debugTitle = status.map((s) => <DebugTitle {...s} />);
     }
     let spinnerClass = fullscreen ? 'dash-spinner-container' : '';
     if (className) {
@@ -91,7 +88,7 @@ const DotSpinner = ({status, color, fullscreen, debug, className, style}) => {
 };
 
 DotSpinner.propTypes = {
-    status: PropTypes.object,
+    status: PropTypes.array,
     color: PropTypes.string,
     className: PropTypes.string,
     fullscreen: PropTypes.bool,