updated loading to more concise

src/components/Snippets.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import API from './SpreadsheetData';
 import {observable} from "mobx";
-import {observer, inject} from 'mobx-react';
+import {observer, inject, action} from 'mobx-react';
 import processString from 'react-process-string';
 import s from '../styles/app.style';
 
@@ -20,6 +20,10 @@ export function PageNotFound(props) {
   );
 }
 
+export function Loading(props) {
+  return (<span>Loading...</span>);
+}
+
 export function Rarity(props) {
   return (
     <span>

src/components/SpreadsheetData.js

@@ -174,6 +174,23 @@ class API {
     }
   }
 
+  // Input format
+  // [{cards: 'attacks'}, {portal: 'attacks'}]
+  async LoadDB(collection) {
+    return new Promise((resolve, reject) => {
+      if (this.urls !== null &&
+        this.portal !== null &&
+        this.cards !== null
+      ) {
+        this.buildCollection(collection)
+        .then(() => {
+          resolve();
+        });
+      }
+      else resolve();
+    });
+  }
+
   // Input format
   // [{cards: 'attacks'}, {portal: 'attacks'}]
   async buildCollection(input) {

src/components/collection/Search.js

@@ -4,6 +4,7 @@ import {observer, inject} from 'mobx-react';
 import loki from 'lokijs';
 import Collapsible from 'react-collapsible';
 import API from '../SpreadsheetData';
+import {Loading} from '../Snippets';
 
 @inject((stores, props, context) => props) @observer
 export default class SearchCollection extends React.Component {
@@ -135,19 +136,14 @@ export default class SearchCollection extends React.Component {
   }
 
   render() {
-    if (this.loaded == false) {
-      if (API.urls !== null &&
-        API.portal !== null &&
-        API.cards !== null
-      ) {
-        API.buildCollection([{'cards': 'attacks'}, {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}])
-        .then(() => {
-          this.loaded = true;
+      if (this.loaded == false) {
+        API.LoadDB([{'cards': 'attacks'}, {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}])
+        .then(() => { 
+          this.loaded = true; 
           this.search();
         });
+        return (<Loading />);
       }
-      return (<span>Loading...</span>);
-    }
 
     let gen = (d, display, text) => {
       let tmp = [];

src/components/entercode/EnterTheCode.js

@@ -5,6 +5,7 @@ import {Link} from 'react-router-dom';
 import Interactive from 'react-interactive';
 import DigitInput from 'react-digit-input';
 import API from '../SpreadsheetData';
+import {Loading} from '../Snippets';
 import style from '../../styles/style';
 
 const s = Object.create(style);
@@ -39,7 +40,7 @@ export default class EnterTheCode extends React.Component {
       API.getSpreadsheet(API.path("1hzSojB76Me-P1qppxYR0oiHSU56jyK59x3DKm660ntc"), (data) => {
         this.fan = data;
       });
-      return (<span>Loading...</span>);
+      return (<Loading />);
     }
 
     let getRandomInt = (min, max) => {

src/components/entercode/PackSimulator.js

@@ -5,6 +5,7 @@ import {Link} from 'react-router-dom';
 import loki from 'lokijs';
 import Interactive from 'react-interactive';
 import API from '../SpreadsheetData';
+import {Loading} from '../Snippets';
 import s from '../../styles/style';
 import '../../scss/packs.scss';
 
@@ -27,17 +28,12 @@ export default class PackSimulator extends React.Component {
 
   render() {
     if (this.loaded == false) {
-      if (API.urls !== null &&
-        API.portal !== null &&
-        API.cards !== null
-      ) {
-        API.buildCollection([{'cards': 'attacks'}, , {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}])
-        .then(() => {
-          this.setupDB();
-          this.loaded = true;
-        });
-      }
-      return (<span>Loading...</span>);
+      API.LoadDB([{'cards': 'attacks'}, {'cards': 'battlegear'}, {'cards': 'creatures'}, {'cards': 'locations'}, {'cards': 'mugic'}])
+      .then(() => {
+        this.setupDB();
+        this.loaded = true;
+      });
+      return (<Loading />);
     }
 
     let setsInput = [];

src/components/portal/Category/Attacks.js

@@ -5,6 +5,7 @@ import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
+import {Loading} from '../../Snippets';
 import Attack from '../Single/Attack';
 
 @inject((stores, props, context) => props) @observer
@@ -13,16 +14,11 @@ export default class Attacks extends React.Component {
 
   render() {
     if (this.loaded == false) {
-      if (API.urls !== null &&
-        API.portal !== null &&
-        API.cards !== null
-      ) {
-        API.buildCollection([{'cards': 'attacks'}, {'portal': 'attacks'}])
-        .then(() => {
-          this.loaded = true;
-        });
-      }
-      return (<span>Loading...</span>);
+      API.LoadDB([{'cards': 'attacks'}, {'portal': 'attacks'}])
+      .then(() => {
+        this.loaded = true;
+      });
+      return (<Loading />);
     }
 
     let path = this.props.location.pathname.split("/");

src/components/portal/Category/Battlegear.js

@@ -5,6 +5,7 @@ import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
+import {Loading} from '../../Snippets';
 import SingleBattlegear from '../Single/Battlegear';
 
 @inject((stores, props, context) => props) @observer
@@ -13,16 +14,11 @@ export default class Battlegear extends React.Component {
 
     render() {
       if (this.loaded == false) {
-        if (API.urls !== null &&
-          API.portal !== null &&
-          API.cards !== null
-        ) {
-          API.buildCollection([{'cards': 'battlegear'}, {'portal': 'battlegear'}])
-          .then(() => {
-            this.loaded = true;
-          });
-        }
-        return (<span>Loading...</span>);
+        API.LoadDB([{'cards': 'battlegear'}, {'portal': 'battlegear'}])
+        .then(() => {
+          this.loaded = true;
+        });
+        return (<Loading />);
       }
 
       let path = this.props.location.pathname.split("/");

src/components/portal/Category/Creatures.js

@@ -5,6 +5,7 @@ import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
+import {Loading} from '../../Snippets';
 import Creature from '../Single/Creature';
 
 @inject((stores, props, context) => props) @observer
@@ -17,16 +18,11 @@ export default class Creatures extends React.Component {
   // The first / gets counted
   render() {
     if (this.loaded == false) {
-      if (API.urls !== null &&
-        API.portal !== null &&
-        API.cards !== null
-      ) {
-        API.buildCollection([{'cards': 'creatures'}, {'portal': 'creatures'}])
-        .then(() => {
-          this.loaded = true;
-        });
-      }
-      return (<span>Loading...</span>);
+      API.LoadDB([{'cards': 'creatures'}, {'portal': 'creatures'}])
+      .then(() => {
+        this.loaded = true;
+      });
+      return (<Loading />);
     }
 
     let path = this.props.location.pathname.split("/");

src/components/portal/Category/Locations.js

@@ -5,6 +5,7 @@ import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
+import {Loading} from '../../Snippets';
 import Location from '../Single/Location';
 
 @inject((stores, props, context) => props) @observer
@@ -13,16 +14,11 @@ export default class Locations extends React.Component {
 
   render() {
     if (this.loaded == false) {
-      if (API.urls !== null &&
-        API.portal !== null &&
-        API.cards !== null
-      ) {
-        API.buildCollection([{'cards': 'locations'}, {'portal': 'locations'}])
-        .then(() => {
-          this.loaded = true;
-        });
-      }
-      return (<span>Loading...</span>);
+      API.buildCollection([{'cards': 'locations'}, {'portal': 'locations'}])
+      .then(() => {
+        this.loaded = true;
+      });
+      return (<Loading />);
     }
 
     let path = this.props.location.pathname.split("/");

src/components/portal/Category/Mugic.js

@@ -5,6 +5,7 @@ import {observable} from 'mobx';
 import {observer, inject} from 'mobx-react';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
+import {Loading} from '../../Snippets';
 import SingleMugic from '../Single/Mugic';
 
 @inject((stores, props, context) => props) @observer
@@ -17,16 +18,11 @@ export default class Mugic extends React.Component {
   // The first / gets counted
   render() {
     if (this.loaded == false) {
-      if (API.urls !== null &&
-        API.portal !== null &&
-        API.cards !== null
-      ) {
-        API.buildCollection([{'cards': 'mugic'}, {'portal': 'mugic'}])
-        .then(() => {
-          this.loaded = true;
-        });
-      }
-      return (<span>Loading...</span>);
+      API.LoadDB([{'cards': 'mugic'}, {'portal': 'mugic'}])
+      .then(() => {
+        this.loaded = true;
+      });
+      return (<Loading />);
     }
 
     let path = this.props.location.pathname.split("/");

src/components/portal/Category/Tribes.js

@@ -6,6 +6,7 @@ import {observer, inject} from 'mobx-react';
 import loki from 'lokijs';
 import s from '../../../styles/app.style';
 import API from '../../SpreadsheetData';
+import {Loading} from '../../Snippets';
 import Creature from '../Single/Creature';
 import Mugic from '../Single/Mugic';
 
@@ -24,16 +25,11 @@ export default class Tribes extends React.Component {
   // -> /{Tribe}/Mugic || /{Tribe}/Creatures
   render() {
     if (this.loaded == false) {
-      if (API.urls !== null &&
-        API.portal !== null &&
-        API.cards !== null
-      ) {
-        API.buildCollection([{'cards': 'creatures'}, {'portal': 'creatures'}, {'cards': 'mugic'}, {'portal': 'mugic'}])
-        .then(() => {
-          this.loaded = true;
-        });
-      }
-      return (<span>Loading...</span>);
+      API.buildCollection([{'cards': 'creatures'}, {'portal': 'creatures'}, {'cards': 'mugic'}, {'portal': 'mugic'}])
+      .then(() => {
+        this.loaded = true;
+      });
+      return (<Loading />);
     }
 
     let path = this.props.location.pathname.split("/");