Repository: plotly/dash
File: components/dash-core-components/src/components/Loading.react.js (JavaScript)

Code before:
    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 and add `,` to make sure only children
    // trigger the loading. See issue: https://github.com/plotly/dash/issues/3276
    stringPath = stringPath.substring(0, stringPath.length - 1) + ',';
    const loadingChildren = toPairs(state.loading).reduce(
        (acc, [path, load]) => {
            if (path.startsWith(stringPath) && load.length) {
                if (
                    targetComponents &&
                    !any(l => {
                        const target = targetComponents[l.id];
                        if (!target) {
                            return false;
                        }
                        if (Array.isArray(target)) {
                            return includes(l.property.split('@')[0], target);
                        }
                        return l.property.split('@')[0] === target;
                    }, load)
                ) {
                    return acc;
                }
                return concat(acc, load);
            }
            return acc;
        },
        []
    );
    if (loadingChildren.length) {
        return loadingChildren;
    }
    return null;
};

function Loading({
    children,
    display = 'auto',
    color = '#119DFF',
    id,
    className,
    style,

Review comment (refactor):
Think it might be better to set that in the reducer or the action.

There is a `// duplicate outputs` comment that I think may have been a todo here: https://github.com/plotly/dash/blob/9cc96271b4574c4587836467031366f7cab18b8e/dash/dash-renderer/src/reducers/loading.ts#L36

To change on the callback would be here: https://github.com/plotly/dash/blob/3f87c9b92a02022416631823a9da292d7976d1c0/dash/dash-renderer/src/actions/callbacks.ts#L751


Code after:
    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 and add `,` to make sure only children
    // trigger the loading. See issue: https://github.com/plotly/dash/issues/3276
    stringPath = stringPath.substring(0, stringPath.length - 1) + ',';
    const loadingChildren = toPairs(state.loading).reduce(
        (acc, [path, load]) => {
            if (path.startsWith(stringPath) && load.length) {
                if (
                    targetComponents &&
                    !any(l => {
                        const target = targetComponents[l.id];
                        if (!target) {
                            return false;
                        }
                        if (Array.isArray(target)) {
                            return includes(l.property, target);
                        }
                        return l.property === target;
                    }, load)
                ) {
                    return acc;
                }
                return concat(acc, load);
            }
            return acc;
        },
        []
    );
    if (loadingChildren.length) {
        return loadingChildren;
    }
    return null;
};

function Loading({
    children,
    display = 'auto',
    color = '#119DFF',
    id,
    className,
    style,