Fix table loading.

Author: T4rk1n

components/dash-table/src/dash-table/dash/Sanitizer.ts

@@ -22,7 +22,6 @@ import {
 } from 'dash-table/components/Table/props';
 import headerRows from 'dash-table/derived/header/headerRows';
 import resolveFlag from 'dash-table/derived/cell/resolveFlag';
-import dataLoading from 'dash-table/derived/table/data_loading';
 import {Column, Columns} from '../components/Table/props';
 
 const D3_DEFAULT_LOCALE: INumberLocale = {
@@ -118,7 +117,7 @@ const getVisibleColumns = (
     );
 
 export default class Sanitizer {
-    sanitize(props: PropsWithDefaults): SanitizedProps {
+    sanitize(props: PropsWithDefaults, isLoading: boolean): SanitizedProps {
         const locale_format = this.applyDefaultToLocale(props.locale_format);
         const data = props.data ?? [];
         const columns = props.columns
@@ -172,7 +171,7 @@ export default class Sanitizer {
                 columns,
                 props.filter_action
             ),
-            loading_state: dataLoading(props.loading_state),
+            loading_state: isLoading,
             locale_format,
             selected_cells,
             visibleColumns

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

@@ -1,4 +1,4 @@
-import React, {Component} from 'react';
+import React, {useMemo} from 'react';
 
 import RealTable from 'dash-table/components/Table';
 
@@ -8,27 +8,28 @@ import Sanitizer from '../Sanitizer';
 
 import {propTypes, defaultProps} from '../DataTable';
 
-export default class DataTable extends Component {
-    constructor(props) {
-        super(props);
-        let id;
-        this.getId = () => (id = id || genRandomId('table-'));
-        this.sanitizer = new Sanitizer();
-    }
-
-    render() {
-        if (!isValidProps(this.props)) {
-            return <div>Invalid props combination</div>;
-        }
+const DataTable = props => {
+    const ctx = window.dash_component_api.useDashContext();
+    const isLoading = ctx.useLoading(
+        loading =>
+            loading.property === 'data' ||
+            loading.property === '' ||
+            loading.property === undefined
+    );
+    const id = useMemo(() => id || genRandomId('table-'), [id]);
+    const sanitizer = useMemo(() => new Sanitizer(), []);
 
-        const sanitizedProps = this.sanitizer.sanitize(this.props);
-        return this.props.id ? (
-            <RealTable {...sanitizedProps} />
-        ) : (
-            <RealTable {...sanitizedProps} id={this.getId()} />
-        );
+    if (!isValidProps(props)) {
+        return <div>Invalid props combination</div>;
     }
-}
+
+    const sanitizedProps = sanitizer.sanitize(props, isLoading);
+    return props.id ? (
+        <RealTable {...sanitizedProps} />
+    ) : (
+        <RealTable {...sanitizedProps} id={id} />
+    );
+};
 
 DataTable.defaultProps = defaultProps;
 DataTable.propTypes = propTypes;

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

@@ -3,6 +3,7 @@ import {useStore, useSelector, useDispatch} from 'react-redux';
 import {pathOr} from 'ramda';
 
 import {DashLayoutPath} from '../types/component';
+import {LoadingPayload} from '../actions/loading';
 
 type DashContextType = {
     componentPath: DashLayoutPath;
@@ -16,6 +17,8 @@ type DashContextType = {
     useStore: typeof useStore;
 };
 
+type LoadingFilterFunc = (loading: LoadingPayload) => boolean;
+
 export const DashContext = React.createContext<DashContextType>({} as any);
 
 type DashContextProviderProps = {
@@ -41,12 +44,18 @@ export function DashContextProvider(props: DashContextProviderProps) {
         return loading.length > 0;
     }, [stringPath]);
 
-    const useLoading = useCallback(() => {
-        return useSelector((state: any) => {
-            const load = pathOr([], [stringPath], state.loading);
-            return load.length > 0;
-        });
-    }, [stringPath]);
+    const useLoading = useCallback(
+        (filterFunc?: LoadingFilterFunc) => {
+            return useSelector((state: any) => {
+                const load = pathOr([], [stringPath], state.loading);
+                if (filterFunc) {
+                    return load.filter(filterFunc).length > 0;
+                }
+                return load.length > 0;
+            });
+        },
+        [stringPath]
+    );
 
     const ctxValue = useMemo(() => {
         return {