fix duplicate loading of plugins

scm-ui/src/containers/Index.js

@@ -27,13 +27,32 @@ type Props = {
   t: string => string
 };
 
-class Index extends Component<Props> {
+type State = {
+  pluginsLoaded: boolean
+};
+
+class Index extends Component<Props, State> {
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      pluginsLoaded: false
+    };
+  }
+
   componentDidMount() {
     this.props.fetchIndexResources();
   }
 
+  pluginLoaderCallback = () => {
+    this.setState({
+      pluginsLoaded: true
+    });
+  };
+
   render() {
     const { indexResources, loading, error, t } = this.props;
+    const { pluginsLoaded } = this.state;
 
     if (error) {
       return (
@@ -47,7 +66,7 @@ class Index extends Component<Props> {
       return <Loading />;
     } else {
       return (
-        <PluginLoader>
+        <PluginLoader loaded={ pluginsLoaded } callback={ this.pluginLoaderCallback }>
           <App />
         </PluginLoader>
       );

scm-ui/src/containers/PluginLoader.js

@@ -5,12 +5,13 @@ import { getUiPluginsLink } from "../modules/indexResource";
 import { connect } from "react-redux";
 
 type Props = {
+  loaded: boolean,
   children: React.Node,
-  link: string
+  link: string,
+  callback: () => void
 };
 
 type State = {
-  finished: boolean,
   message: string
 };
 
@@ -23,18 +24,20 @@ class PluginLoader extends React.Component<Props, State> {
   constructor(props: Props) {
     super(props);
     this.state = {
-      finished: false,
       message: "booting"
     };
   }
 
   componentDidMount() {
+    const { loaded } = this.props;
+    if (!loaded) {
       this.setState({
         message: "loading plugin information"
       });
   
       this.getPlugins(this.props.link);
     }
+  }
 
   getPlugins = (link: string): Promise<any> => {
     return apiClient
@@ -43,11 +46,7 @@ class PluginLoader extends React.Component<Props, State> {
       .then(JSON.parse)
       .then(pluginCollection => pluginCollection._embedded.plugins)
       .then(this.loadPlugins)
-      .then(() => {
+      .then(this.props.callback);
-        this.setState({
-          finished: true
-        });
-      });
   };
 
   loadPlugins = (plugins: Plugin[]) => {
@@ -87,8 +86,9 @@ class PluginLoader extends React.Component<Props, State> {
   };
 
   render() {
-    const { message, finished } = this.state;
+    const { loaded } = this.props;
-    if (finished) {
+    const { message } = this.state;
+    if (loaded) {
       return <div>{this.props.children}</div>;
     }
     return <Loading message={message} />;