Add useLoading

Author: T4rk1n

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

@@ -14,6 +14,8 @@ function wait(ms) {
  */
 
 export default class Clipboard extends React.Component {
+    context = window.dash_component_api.DashContext;
+
     constructor(props) {
         super(props);
         this.copyToClipboard = this.copyToClipboard.bind(this);
@@ -96,7 +98,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,7 +126,7 @@ 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;
@@ -136,9 +138,6 @@ export default class Clipboard extends React.Component {
                 style={style}
                 className={className}
                 onClick={this.onClickHandler}
-                data-dash-is-loading={
-                    (loading_state && loading_state.is_loading) || undefined
-                }
             >
                 <i> {btnIcon}</i>
             </div>
@@ -196,24 +195,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.
      */

dash/dash-renderer/src/wrapper/DashContext.tsx

@@ -8,6 +8,7 @@ type DashContextType = {
     componentPath: DashLayoutPath;
 
     isLoading: () => boolean;
+    useLoading: () => boolean;
 
     // Give access to the right store.
     useSelector: typeof useSelector;
@@ -34,16 +35,21 @@ export function DashContextProvider(props: DashContextProviderProps) {
     const isLoading = useCallback(() => {
         const loading = pathOr(
             [],
-            componentPath,
+            [stringPath],
             (store.getState() as any).loading
         );
         return loading.length > 0;
     }, [stringPath]);
 
+    const useLoading = useCallback(() => {
+        return useSelector(state => !!pathOr(false, [stringPath], state));
+    }, [stringPath]);
+
     const ctxValue = useMemo(() => {
         return {
             componentPath,
             isLoading,
+            useLoading,
 
             useSelector,
             useStore,