Only fetch App when necessary (#4023)

* Only fetch App when necessary. Show loadings + 404 #3914

* PR Grumble

js/src/views/Dapp/dapp.css

@@ -20,3 +20,23 @@
   height: 100%;
   width: 100%;
 }
+
+.full {
+  width: 100vw;
+  height: 100vh;
+  margin: 0;
+  padding: 0;
+  background: white;
+  font-family: 'Roboto', sans-serif;
+  font-size: 16px;
+  font-weight: 300;
+
+  .text {
+    text-align: center;
+    padding: 5em;
+    font-size: 2em;
+    color: #999;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

js/src/views/Dapp/dapp.js

@@ -16,6 +16,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import { observer } from 'mobx-react';
+import { FormattedMessage } from 'react-intl';
 
 import DappsStore from '../Dapps/dappsStore';
 
@@ -25,21 +26,71 @@ import styles from './dapp.css';
 export default class Dapp extends Component {
   static contextTypes = {
     api: PropTypes.object.isRequired
-  }
+  };
 
   static propTypes = {
     params: PropTypes.object
   };
 
+  state = {
+    app: null,
+    loading: true
+  };
+
   store = DappsStore.get(this.context.api);
 
+  componentWillMount () {
+    const { id } = this.props.params;
+    this.loadApp(id);
+  }
+
+  componentWillReceiveProps (nextProps) {
+    if (nextProps.params.id !== this.props.params.id) {
+      this.loadApp(nextProps.params.id);
+    }
+  }
+
+  loadApp (id) {
+    this.setState({ loading: true });
+
+    this.store
+      .loadApp(id)
+      .then((app) => {
+        this.setState({ loading: false, app });
+      })
+      .catch(() => {
+        this.setState({ loading: false });
+      });
+  }
+
   render () {
     const { dappsUrl } = this.context.api;
-    const { id } = this.props.params;
-    const app = this.store.apps.find((app) => app.id === id);
+    const { app, loading } = this.state;
+
+    if (loading) {
+      return (
+        <div className={ styles.full }>
+          <div className={ styles.text }>
+            <FormattedMessage
+              id='dapp.loading'
+              defaultMessage='Loading'
+            />
+          </div>
+        </div>
+      );
+    }
 
     if (!app) {
-      return null;
+      return (
+        <div className={ styles.full }>
+          <div className={ styles.text }>
+            <FormattedMessage
+              id='dapp.unavailable'
+              defaultMessage='The dapp cannot be reached'
+            />
+          </div>
+        </div>
+      );
     }
 
     let src = null;

js/src/views/Dapps/dapps.js

@@ -45,6 +45,10 @@ class Dapps extends Component {
   store = DappsStore.get(this.context.api);
   permissionStore = new PermissionStore(this.context.api);
 
+  componentWillMount () {
+    this.store.loadAllApps();
+  }
+
   render () {
     let externalOverlay = null;
     if (this.store.externalOverlayVisible) {

js/src/views/Dapps/dappsStore.js

@@ -48,17 +48,43 @@ export default class DappsStore {
 
     this.readDisplayApps();
     this.loadExternalOverlay();
-    this.loadApps();
     this.subscribeToChanges();
   }
 
-  loadApps () {
+  /**
+   * Try to find the app from the local (local or builtin)
+   * apps, else fetch from the node
+   */
+  loadApp (id) {
     const { dappReg } = Contracts.get();
 
-    Promise
+    return this
+      .loadLocalApps()
+      .then(() => {
+        const app = this.apps.find((app) => app.id === id);
+
+        if (app) {
+          return app;
+        }
+
+        return this.fetchRegistryApp(dappReg, id, true);
+      });
+  }
+
+  loadLocalApps () {
+    return Promise
       .all([
         this.fetchBuiltinApps().then((apps) => this.addApps(apps)),
-        this.fetchLocalApps().then((apps) => this.addApps(apps)),
+        this.fetchLocalApps().then((apps) => this.addApps(apps))
+      ]);
+  }
+
+  loadAllApps () {
+    const { dappReg } = Contracts.get();
+
+    return Promise
+      .all([
+        this.loadLocalApps(),
         this.fetchRegistryApps(dappReg).then((apps) => this.addApps(apps))
       ])
       .then(this.writeDisplayApps);
@@ -67,8 +93,6 @@ export default class DappsStore {
   static get (api) {
     if (!instance) {
       instance = new DappsStore(api);
-    } else {
-      instance.loadApps();
     }
 
     return instance;