Revert "Revert "Aligning pages delayed configuration loading with the…

… fact that all module plugins are loaded at once.""

This reverts commit 3a54f0f.

web/client/components/plugins/enhancers/withModulePlugins.js

@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import useModulePlugins from "../../../hooks/useModulePlugins";
 import {getPlugins} from "../../../utils/ModulePluginsUtils";
 
@@ -26,7 +26,7 @@ const getPluginsConfig = ({pluginsConfig: config, mode = 'desktop', defaultMode}
  * HOC to provide additional logic layer for module plugins loading and caching
  * @param {function(): string[]} getPluginsConfigCallback - callback to extract proper part of plugins configuration passed with `pluginsConfig` prop
  */
-const withModulePlugins = (getPluginsConfigCallback = getPluginsConfig) => (Component) => ({ pluginsConfig, plugins = {}, loaderComponent = () => null, ...props }) => {
+const withModulePlugins = (getPluginsConfigCallback = getPluginsConfig) => (Component) => ({ onPluginsLoaded = () => {}, pluginsConfig, plugins = {}, loaderComponent = () => null, ...props }) => {
     const config = getPluginsConfigCallback({pluginsConfig, ...props});
     const { plugins: loadedPlugins, pending } = useModulePlugins({
         pluginsEntries: getPlugins(plugins, 'module'),
@@ -37,6 +37,10 @@ const withModulePlugins = (getPluginsConfigCallback = getPluginsConfig) => (Comp
 
     const Loader = loaderComponent;
 
+    useEffect(() => {
+        if (!loading) onPluginsLoaded(true);
+    }, [loading]);
+
     return loading ? <Loader /> : <Component {...props} pluginsConfig={pluginsConfig} plugins={parsedPlugins} allPlugins={plugins} />;
 };
 

web/client/product/pages/Context.jsx

@@ -17,7 +17,6 @@ import { loadContext, clearContext } from '../../actions/context';
 import MapViewerContainer from '../../containers/MapViewer';
 import { contextMonitoredStateSelector, pluginsSelector, currentTitleSelector, contextThemeSelector, contextCustomVariablesEnabledSelector } from '../../selectors/context';
 import ContextTheme from '../../components/theme/ContextTheme';
-import {onPluginsLoadedHandler} from "../../utils/ModulePluginsUtils";
 
 const ConnectedContextTheme = connect(
     createStructuredSelector({
@@ -117,14 +116,14 @@ class Context extends React.Component {
         );
     }
 
-    onPluginsLoaded = (loadedPlugins) => {
-        onPluginsLoadedHandler(loadedPlugins, ['Context'], () => {
+    onPluginsLoaded = (pluginsAreLoaded) => {
+        if (pluginsAreLoaded && !this.state.pluginsAreLoaded) {
             this.setState({pluginsAreLoaded: true}, () => {
                 const params = this.props.match.params;
                 this.oldTitle = document.title;
                 this.props.loadContext(params);
             });
-        }, this.state.pluginsAreLoaded);
+        }
     }
 }
 

web/client/product/pages/ContextCreator.jsx

@@ -15,7 +15,6 @@ const urlQuery = url.parse(window.location.href, true).query;
 import {clearContextCreator, loadContext} from '../../actions/contextcreator';
 import Page from '../../containers/Page';
 import BorderLayout from '../../components/layout/BorderLayout';
-import {onPluginsLoadedHandler} from "../../utils/ModulePluginsUtils";
 
 /**
   * @name ContextCreator
@@ -58,14 +57,14 @@ class ContextCreator extends React.Component {
         this.props.reset();
     }
 
-    onPluginsLoaded = (loadedPlugins) => {
-        onPluginsLoadedHandler(loadedPlugins, ['ContextCreator', 'Tutorial'], () => {
+    onPluginsLoaded = (pluginsAreLoaded) => {
+        if (pluginsAreLoaded && !this.state.pluginsAreLoaded) {
             this.setState({pluginsAreLoaded: true}, () => {
                 const contextId = get(this.props, "match.params.contextId");
                 this.props.reset();
                 this.props.loadContext(contextId);
             });
-        }, this.state.pluginsAreLoaded);
+        }
     }
 
     render() {

web/client/product/pages/Dashboard.jsx

@@ -18,7 +18,6 @@ import { loadDashboard, resetDashboard } from '../../actions/dashboard';
 import { checkLoggedUser } from '../../actions/security';
 import Page from '../../containers/Page';
 import BorderLayout from '../../components/layout/BorderLayout';
-import {onPluginsLoadedHandler} from "../../utils/ModulePluginsUtils";
 
 /**
   * @name Dashboard
@@ -65,8 +64,8 @@ class DashboardPage extends React.Component {
         this.props.reset();
     }
 
-    onPluginsLoaded = (loadedPlugins) => {
-        onPluginsLoadedHandler(loadedPlugins, ['Dashboard'], () => {
+    onPluginsLoaded = (pluginsAreLoaded) => {
+        if (pluginsAreLoaded && !this.state.pluginsAreLoaded) {
             this.setState({pluginsAreLoaded: true}, () => {
                 const id = get(this.props, "match.params.did");
                 if (id) {
@@ -77,7 +76,7 @@ class DashboardPage extends React.Component {
                     this.props.checkLoggedUser();
                 }
             });
-        }, this.state.pluginsAreLoaded);
+        }
     }
 
     render() {

web/client/product/pages/GeoStory.jsx

@@ -21,7 +21,6 @@ import {
 import { geostoryIdSelector } from '../../selectors/geostory';
 import { isLoggedIn } from '../../selectors/security';
 import BorderLayout from '../../components/layout/BorderLayout';
-import {normalizeName} from "../../utils/PluginsUtils";
 
 /**
   * @name GeoStory
@@ -79,10 +78,8 @@ class GeoStoryPage extends React.Component {
         this.props.reset();
     }
 
-    onPluginsLoaded = (loadedPlugins) => {
-        const pluginKeys = typeof loadedPlugins === 'object' ? Object.keys(loadedPlugins) : loadedPlugins;
-        const plugins = ['GeoStory'];
-        if (plugins.every(elem => pluginKeys.includes(normalizeName(elem))) && !this.state.pluginsAreLoaded) {
+    onPluginsLoaded = (pluginsAreLoaded) => {
+        if (pluginsAreLoaded && !this.state.pluginsAreLoaded) {
             this.setState({pluginsAreLoaded: true}, () => {
                 const id = get(this.props, "match.params.gid");
                 const previousId = this.props.previousId && this.props.previousId + '';

web/client/product/pages/Maps.jsx

@@ -16,7 +16,6 @@ import {resetControls} from '../../actions/controls';
 import {loadMaps} from '../../actions/maps';
 import Page from '../../containers/Page';
 import ConfigUtils from '../../utils/ConfigUtils';
-import {normalizeName} from "../../utils/PluginsUtils";
 
 import("../assets/css/maps.css");
 
@@ -56,10 +55,8 @@ class MapsPage extends React.Component {
         }
     }
 
-    onPluginsLoaded = (loadedPlugins) => {
-        const pluginKeys = typeof loadedPlugins === 'object' ? Object.keys(loadedPlugins) : loadedPlugins;
-        const plugins = ['Dashboards', 'GeoStories', 'Maps'];
-        if (plugins.every(elem => pluginKeys.includes(normalizeName(elem))) && !this.state.pluginsAreLoaded) {
+    onPluginsLoaded = (pluginsAreLoaded) => {
+        if (pluginsAreLoaded && !this.state.pluginsAreLoaded) {
             this.setState({pluginsAreLoaded: true}, () => {
                 this.props.loadMaps();
             });