Fix tab new loading

Author: T4rk1n

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

@@ -27,8 +27,13 @@ const EnhancedTab = ({
     amountOfTabs,
     colors,
     vertical,
-    loading_state,
+    componentPath,
 }) => {
+    const ctx = window.dash_component_api.useDashContext();
+    // We use the raw path here since it's up one level from
+    // the tabs child.
+    const isLoading = ctx.useLoading({rawPath: componentPath});
+
     let tabStyle = style;
     if (disabled) {
         tabStyle = {tabStyle, ...disabled_style};
@@ -53,9 +58,7 @@ const EnhancedTab = ({
     }
     return (
         <div
-            data-dash-is-loading={
-                (loading_state && loading_state.is_loading) || undefined
-            }
+            data-dash-is-loading={isLoading}
             className={tabClassName}
             id={id}
             style={tabStyle}
@@ -227,7 +230,7 @@ export default class Tabs extends Component {
                         vertical={this.props.vertical}
                         amountOfTabs={amountOfTabs}
                         colors={this.props.colors}
-                        loading_state={childProps.loading_state}
+                        componentPath={child.componentPath}
                     />
                 );
             });

components/dash-table/src/dash-table/dash/fragments/DataTable.js

@@ -10,12 +10,12 @@ import {propTypes} from '../DataTable';
 
 const DataTable = props => {
     const ctx = window.dash_component_api.useDashContext();
-    const isLoading = ctx.useLoading(
-        loading =>
+    const isLoading = ctx.useLoading({
+        filterFunc: loading =>
             loading.property === 'data' ||
             loading.property === '' ||
             loading.property === undefined
-    );
+    });
     const id = useMemo(() => id || genRandomId('table-'), [id]);
     const sanitizer = useMemo(() => new Sanitizer(), []);
 

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

@@ -1,24 +1,39 @@
 import React, {useCallback, useContext, useMemo} from 'react';
 import {useStore, useSelector, useDispatch} from 'react-redux';
-import {pathOr} from 'ramda';
+import {concat, pathOr} from 'ramda';
 
 import {DashLayoutPath} from '../types/component';
 import {LoadingPayload} from '../actions/loading';
 
+type LoadingFilterFunc = (loading: LoadingPayload) => boolean;
+
+type LoadingOptions = {
+    /**
+     *
+     */
+    extraPath?: DashLayoutPath;
+    /**
+     *
+     */
+    rawPath?: boolean;
+    /**
+     * Function used to filter the properties of the loading component.
+     */
+    filterFunc?: LoadingFilterFunc;
+};
+
 type DashContextType = {
     componentPath: DashLayoutPath;
 
-    isLoading: () => boolean;
-    useLoading: () => boolean;
+    isLoading: (options?: LoadingOptions) => boolean;
+    useLoading: (options?: LoadingOptions) => boolean;
 
     // Give access to the right store.
     useSelector: typeof useSelector;
     useDispatch: typeof useDispatch;
     useStore: typeof useStore;
 };
 
-type LoadingFilterFunc = (loading: LoadingPayload) => boolean;
-
 export const DashContext = React.createContext<DashContextType>({} as any);
 
 type DashContextProviderProps = {
@@ -35,19 +50,42 @@ export function DashContextProvider(props: DashContextProviderProps) {
     );
     const store = useStore();
 
-    const isLoading = useCallback(() => {
-        const loading = pathOr(
-            [],
-            [stringPath],
-            (store.getState() as any).loading
-        );
-        return loading.length > 0;
-    }, [stringPath]);
+    const isLoading = useCallback(
+        (options?: LoadingOptions) => {
+            const {extraPath, rawPath, filterFunc} = options || {};
+            let loadingPath = [stringPath];
+            if (extraPath) {
+                loadingPath = [
+                    JSON.stringify(concat(componentPath, extraPath))
+                ];
+            } else if (rawPath) {
+                loadingPath = [JSON.stringify(rawPath)];
+            }
+            const loading = pathOr(
+                [],
+                loadingPath,
+                (store.getState() as any).loading
+            );
+            return filterFunc
+                ? loading.filter(filterFunc).length > 0
+                : loading.length > 0;
+        },
+        [stringPath]
+    );
 
     const useLoading = useCallback(
-        (filterFunc?: LoadingFilterFunc) => {
+        (options?: LoadingOptions) => {
+            const {filterFunc, extraPath, rawPath} = options || {};
             return useSelector((state: any) => {
-                const load = pathOr([], [stringPath], state.loading);
+                let loadingPath = [stringPath];
+                if (extraPath) {
+                    loadingPath = [
+                        JSON.stringify(concat(componentPath, extraPath))
+                    ];
+                } else if (rawPath) {
+                    loadingPath = [JSON.stringify(rawPath)];
+                }
+                const load = pathOr([], loadingPath, state.loading);
                 if (filterFunc) {
                     return load.filter(filterFunc).length > 0;
                 }