Styled (slightly) the loading template.

public/components/App.jsx

@@ -72,7 +72,6 @@ class App extends React.Component {
 
     //For testing you can switch the router type
     let RouterType = BrowserRouter;
-    console.log(process.env.NODE_ENV);
     if(true) RouterType = HashRouter;
 
     return (

public/components/page/Page.jsx

@@ -41,13 +41,11 @@ class Page extends React.Component {
   render() {
     let { title, style, className } = this.props;
 
-    let clazzes = "c-page";
-
-    if(className) clazzes += " " + className;
+    let clazzes = `c-page ${className||""}`;
 
     let titleHelmet;
-    if((!title || !title.length) && this.props.style != "home-page") {
-      console.exception("This page (" + (this.props.style || this.props.className) + ") does not have a title!");
+    if((!title || !title.length) && style != "home-page") {
+      console.exception(`This page (${style||className}) does not have a title!`);
     } else {
       titleHelmet = <title>{ this.props.title }</title>
     }

public/components/page/error/ErrorPage.jsx

@@ -0,0 +1,33 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+
+export default props => {
+  let { className } = props;
+  return (
+    <Page className="c-error-page">
+      An error occured! Try again later.
+    </Page>
+  );
+};

public/components/page/loading/LoadingPage.jsx

@@ -0,0 +1,40 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+import React from 'react';
+
+import Styles from './LoadingPage.scss';
+
+import Page from '@components/Page/Page';
+import Loader from '@objects/loading/Loader';
+
+
+export default props => {
+  let { className } = props;
+  
+  return (
+    <Page className={`o-loading-page ${className||''}`} title="Loading...">
+      <Loader />
+    </Page>
+  );
+};

public/components/page/loading/LoadingPage.scss

@@ -0,0 +1,29 @@
+// Copyright (c) 2018 Dominic Masters
+//
+// MIT License
+//
+// Permission is hereby granted, free of charge, to any person obtaining
+// a copy of this software and associated documentation files (the
+// "Software"), to deal in the Software without restriction, including
+// without limitation the rights to use, copy, modify, merge, publish,
+// distribute, sublicense, and/or sell copies of the Software, and to
+// permit persons to whom the Software is furnished to do so, subject to
+// the following conditions:
+//
+// The above copyright notice and this permission notice shall be
+// included in all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+// EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+// NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+// LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+// OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+// WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+@import '~@styles/global';
+
+.c-loading-page {
+  position: relative;
+  min-height: 90vh;
+}

public/components/page/route/Routes.jsx

@@ -22,16 +22,19 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
 import React from 'react';
-import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import { withRouter } from 'react-router';
 import PropTypes from 'prop-types'
-import { HashRouter, Route, Switch } from 'react-router-dom';
 import Loadable from 'react-loadable';
+import { withRouter } from 'react-router';
+import { HashRouter, Route, Switch } from 'react-router-dom';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+
+import ErrorPage from './../error/ErrorPage';
+import LoadingPage from './../loading/LoadingPage';
 
 const PageLoading = (props) => {
   let { error, pastDelay } = props;
-  if(error) return <span>Loading Error</span>;
-  if(pastDelay) return <span>Loading...</span>;
+  if(error) return <ErrorPage {...props} />;
+  if(pastDelay) return <LoadingPage {...props} />;
   return null;
 };