Fix initial loading of libraries.

Author: T4rk1n

dash/dash-renderer/src/APIController.react.js

@@ -1,6 +1,12 @@
 import {batch, connect} from 'react-redux';
 import {includes, isEmpty} from 'ramda';
-import React, {useEffect, useRef, useState, createContext} from 'react';
+import React, {
+    useEffect,
+    useRef,
+    useState,
+    createContext,
+    useCallback
+} from 'react';
 import PropTypes from 'prop-types';
 import TreeContainer from './TreeContainer';
 import GlobalErrorContainer from './components/error/GlobalErrorContainer.react';
@@ -47,6 +53,10 @@ const UnconnectedContainer = props => {
     if (!events.current) {
         events.current = new EventEmitter();
     }
+
+    const [libraryReady, setLibraryReady] = useState(false);
+    const onLibraryReady = useCallback(() => setLibraryReady(true), []);
+
     const renderedTree = useRef(false);
 
     const propsRef = useRef({});
@@ -61,7 +71,9 @@ const UnconnectedContainer = props => {
         })
     });
 
-    useEffect(storeEffect.bind(null, props, events, setErrorLoading));
+    useEffect(
+        storeEffect.bind(null, props, events, setErrorLoading, libraryReady)
+    );
 
     useEffect(() => {
         if (renderedTree.current) {
@@ -98,38 +110,43 @@ const UnconnectedContainer = props => {
 
         content = (
             <DashContext.Provider value={provider.current}>
-                <LibraryManager
-                    requests_pathname_prefix={config.requests_pathname_prefix}
-                >
-                    <TreeContainer
-                        _dashprivate_error={error}
-                        _dashprivate_layout={layout}
-                        _dashprivate_loadingState={getLoadingState(
-                            layout,
-                            [],
-                            loadingMap
-                        )}
-                        _dashprivate_loadingStateHash={getLoadingHash(
-                            [],
-                            loadingMap
-                        )}
-                        _dashprivate_path={JSON.stringify([])}
-                    />
-                </LibraryManager>
+                <TreeContainer
+                    _dashprivate_error={error}
+                    _dashprivate_layout={layout}
+                    _dashprivate_loadingState={getLoadingState(
+                        layout,
+                        [],
+                        loadingMap
+                    )}
+                    _dashprivate_loadingStateHash={getLoadingHash(
+                        [],
+                        loadingMap
+                    )}
+                    _dashprivate_path={JSON.stringify([])}
+                />
             </DashContext.Provider>
         );
     } else {
         content = <div className='_dash-loading'>Loading...</div>;
     }
 
-    return config && config.ui === true ? (
-        <GlobalErrorContainer>{content}</GlobalErrorContainer>
-    ) : (
-        content
+    return (
+        <LibraryManager
+            requests_pathname_prefix={config.requests_pathname_prefix}
+            onReady={onLibraryReady}
+            ready={libraryReady}
+            layout={layoutRequest && layoutRequest.content}
+        >
+            {config && config.ui === true ? (
+                <GlobalErrorContainer>{content}</GlobalErrorContainer>
+            ) : (
+                content
+            )}
+        </LibraryManager>
     );
 };
 
-function storeEffect(props, events, setErrorLoading) {
+function storeEffect(props, events, setErrorLoading, libraryReady) {
     const {
         appLifecycle,
         dependenciesRequest,
@@ -148,7 +165,7 @@ function storeEffect(props, events, setErrorLoading) {
             }
             dispatch(apiThunk('_dash-layout', 'GET', 'layoutRequest'));
         } else if (layoutRequest.status === STATUS.OK) {
-            if (isEmpty(layout)) {
+            if (isEmpty(layout) && libraryReady) {
                 if (typeof hooks.layout_post === 'function') {
                     hooks.layout_post(layoutRequest.content);
                 }
@@ -191,7 +208,8 @@ function storeEffect(props, events, setErrorLoading) {
             layoutRequest.status === STATUS.OK &&
             !isEmpty(layout) &&
             // Hasn't already hydrated
-            appLifecycle === getAppState('STARTED')
+            appLifecycle === getAppState('STARTED') &&
+            libraryReady
         ) {
             let hasError = false;
             try {
@@ -240,7 +258,8 @@ const Container = connect(
         graphs: state.graphs,
         history: state.history,
         error: state.error,
-        config: state.config
+        config: state.config,
+        paths: state.paths
     }),
     dispatch => ({dispatch})
 )(UnconnectedContainer);

dash/dash-renderer/src/libraries/LibraryManager.tsx

@@ -1,21 +1,67 @@
-import React, {JSX} from 'react';
+import React, {JSX, useEffect, useState} from 'react';
 
 import {createLibrariesContext, LibrariesContext} from './librariesContext';
+import {crawlLayout} from '../actions/utils';
+import {isEmpty} from 'ramda';
 
 type LibrariesManagerProps = {
     children: JSX.Element;
     requests_pathname_prefix: string;
+    onReady: () => void;
+    ready: boolean;
+    layout?: any;
+    initialLibraries?: string[];
 };
 
-const LibraryManager = (props: LibrariesManagerProps) => {
-    const {children, requests_pathname_prefix} = props;
-    const contextValue = createLibrariesContext(requests_pathname_prefix);
-
+const LibraryProvider = (props: LibrariesManagerProps) => {
+    const {
+        children,
+        requests_pathname_prefix,
+        onReady,
+        ready,
+        initialLibraries
+    } = props;
+    const contextValue = createLibrariesContext(
+        requests_pathname_prefix,
+        initialLibraries as string[],
+        onReady,
+        ready
+    );
     return (
         <LibrariesContext.Provider value={contextValue}>
             {children}
         </LibrariesContext.Provider>
     );
 };
 
+const LibraryManager = (props: LibrariesManagerProps) => {
+    const {children, ready, layout} = props;
+
+    const [initialLibraries, setInitialLibraries] = useState<string[] | null>(
+        null
+    );
+
+    useEffect(() => {
+        if (layout && !isEmpty(layout) && !ready && !initialLibraries) {
+            const libraries: string[] = [];
+            crawlLayout(layout, (child: any) => {
+                if (child.namespace && !libraries.includes(child.namespace)) {
+                    libraries.push(child.namespace);
+                }
+            });
+            setInitialLibraries(libraries);
+        }
+    }, [layout, ready, initialLibraries]);
+
+    if (!initialLibraries) {
+        return children;
+    }
+
+    return (
+        <LibraryProvider {...props} initialLibraries={initialLibraries}>
+            {children}
+        </LibraryProvider>
+    );
+};
+
 export default LibraryManager;

dash/dash-renderer/src/libraries/librariesContext.ts

@@ -101,9 +101,24 @@ export function librariesReducer(
 }
 
 export function createLibrariesContext(
-    pathnamePrefix: string
+    pathnamePrefix: string,
+    initialLibraries: string[],
+    onReady: () => void,
+    ready: boolean
 ): LibrariesContextType {
-    const [state, dispatch] = useReducer(librariesReducer, {});
+    const [state, dispatch] = useReducer(librariesReducer, {}, () => {
+        const libState: LibrariesState = {};
+        initialLibraries.forEach(lib => {
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            if (window[lib]) {
+                libState[lib] = {toLoad: false, loaded: true, loading: false};
+            } else {
+                libState[lib] = {toLoad: true, loaded: false, loading: false};
+            }
+        });
+        return libState;
+    });
     const [callback, setCallback] = useState<number>(-1);
     const createAction = (type: LibrariesActions) => (payload: any) =>
         dispatch({type, payload});
@@ -191,13 +206,17 @@ export function createLibrariesContext(
             .then(() => {
                 setLoaded({libraries});
                 setCallback(-1);
+                onReady();
             });
     };
 
     // Load libraries on a throttle to have time to gather all the components in one go.
     useEffect(() => {
         const libraries = getLibrariesToLoad();
         if (!libraries.length) {
+            if (!ready && initialLibraries.length === 0) {
+                onReady();
+            }
             return;
         }
         if (callback > 0) {

dash/dash-renderer/src/persistence.js

@@ -68,7 +68,7 @@ import {
 } from 'ramda';
 import {createAction} from 'redux-actions';
 
-// import Registry from './registry';
+import Registry from './registry';
 import {stringifyId} from './actions/dependencies';
 
 export const storePrefix = '_dash_persistence.';
@@ -289,7 +289,8 @@ const getProps = layout => {
     }
     const {id, persistence} = props;
 
-    const getVal = prop => props[prop] || {}[prop];
+    const element = Registry.resolve(layout);
+    const getVal = prop => props[prop] || (element.defaultProps || {})[prop];
     const persisted_props = getVal('persisted_props');
     const persistence_type = getVal('persistence_type');
     const canPersist = id && persisted_props && persistence_type;
@@ -298,6 +299,7 @@ const getProps = layout => {
         canPersist,
         id,
         props,
+        element,
         persistence,
         persisted_props,
         persistence_type
@@ -309,6 +311,7 @@ export function recordUiEdit(layout, newProps, dispatch) {
         canPersist,
         id,
         props,
+        element,
         persistence,
         persisted_props,
         persistence_type
@@ -321,7 +324,7 @@ export function recordUiEdit(layout, newProps, dispatch) {
         const [propName, propPart] = persistedProp.split('.');
         if (newProps[propName] !== undefined) {
             const storage = getStore(persistence_type, dispatch);
-            const {extract} = getTransform({}, propName, propPart);
+            const {extract} = getTransform(element, propName, propPart);
 
             const valsKey = getValsKey(id, persistedProp, persistence);
             let originalVal = extract(props[propName]);