| 38 | |
| 39 | const loadingSelector = |
| 40 | ( |
| 41 | componentPath: DashLayoutPath, |
| 42 | targetComponents?: Record<string, string | string[]> |
| 43 | ) => |
| 44 | (state: LoadingState): DebugTitleProps[] | null => { |
| 45 | let stringPath = JSON.stringify(componentPath); |
| 46 | // Remove the last ] for easy match and add `,` to make sure only children |
| 47 | // trigger the loading. See issue: https://github.com/plotly/dash/issues/3276 |
| 48 | stringPath = stringPath.substring(0, stringPath.length - 1) + ','; |
| 49 | const loadingChildren = toPairs(state.loading).reduce( |
| 50 | (acc, [path, load]) => { |
| 51 | if (path.startsWith(stringPath) && load.length) { |
| 52 | if ( |
| 53 | targetComponents && |
| 54 | !any((l: DebugTitleProps) => { |
| 55 | const target = targetComponents[l.id]; |
| 56 | if (!target) { |
| 57 | return false; |
| 58 | } |
| 59 | if (target === '*') { |
| 60 | return true; |
| 61 | } |
| 62 | if (Array.isArray(target)) { |
| 63 | return includes(l.property, target); |
| 64 | } |
| 65 | return l.property === target; |
| 66 | }, load) |
| 67 | ) { |
| 68 | return acc; |
| 69 | } |
| 70 | return concat(acc, load); |
| 71 | } |
| 72 | return acc; |
| 73 | }, |
| 74 | [] as DebugTitleProps[] |
| 75 | ); |
| 76 | if (loadingChildren.length) { |
| 77 | return loadingChildren; |
| 78 | } |
| 79 | return null; |
| 80 | }; |
| 81 | |
| 82 | function Loading({ |
| 83 | children, |