Merge branch 'release/v0.6.1'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "skeleton-ui-react",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "React SPA Starter Project",
   "main": "index.js",
   "repository": "[email protected]:leanstacks/skeleton-ui-react.git",

src/app.js

@@ -42,7 +42,10 @@ if (technologiesLastUpdated.add(1, 'hours').isBefore(moment())) {
   // Fetch Data using API
   store.dispatch(startSetTechnologies()).then(() => {
     console.log('startSetTechnologies success');
-    renderApp();
+    // Simulate API Latency -- Remove in Production
+    setTimeout(() => {
+      renderApp();
+    }, 2000);
   }).catch((err) => {
     //TODO Handle API Failure
     console.log('startSetTechnologies failure');

src/components/BusyIndicator.js

@@ -3,27 +3,28 @@ import React from 'react';
 const getSizeClass = (size) => {
   switch (size) {
     case 'xl':
-      return 'busy-indicator--xl';
+      return 'h1';
     case 'lg':
-      return 'busy-indicator--lg';
+      return 'lead';
     case 'sm':
-      return 'busy-indicator--sm';
+      return 'small';
     default:
-      return 'busy-indicator--md';
+      return '';
   };
 };
 
 const BusyIndicator = (props) => {
-  const icon = props.icon || 'fa-circle-o-notch';
+  const icon = props.icon || 'fa-circle-notch';
   return (
-    <div className={'busy-indicator ' + getSizeClass(props.size)}>
-      <div className="busy-indicator__content">
-        <div className="busy-indicator__heading">
-          <div className="busy-indicator__title">{props.title}</div>
-        </div>
-        <div className="busy-indicator__body">
-          <i className={'busy-indicator__icon fa fa-fw fa-spin ' + icon} />
-        </div>
+    <div className="h-100 d-flex flex-column justify-content-center text-center">
+      <div className={getSizeClass(props.size)}>
+        { 
+          props.title ? (
+            <span>{props.title}&nbsp;<i className={'fas fa-spin ' + icon} /></span>
+          ) : (
+            <i className={'fas fa-spin ' + icon} />
+          )
+        }
       </div>
     </div>
   );

src/components/LoadingPage.js

@@ -3,8 +3,8 @@ import React from 'react';
 import BusyIndicator from './BusyIndicator';
 
 const LoadingPage = () => (
-  <div className="busy-indicator--full-page">
-    <BusyIndicator size="xl" />
+  <div className="page-full">
+    <BusyIndicator size="xl" title="Loading..." />
   </div>
 );
 

src/styles/base/_base.scss

@@ -16,10 +16,6 @@ a {
   }
 }
 
-.page {
-  min-height: 75vh;
-}
-
 .text-blue {
   color: $blue;
 }
@@ -30,4 +26,18 @@ a {
 
 .text-react-blue {
   color: $react-blue;
-}
+}
+
+.page {
+  min-height: 75vh;
+}
+
+.page-full {
+  height: 100vh;
+  width: 100vw;
+}
+
+.page-half {
+  height: 50vh;
+  width: 100vw;
+}

src/styles/styles.scss

@@ -1,4 +1,3 @@
 @import './base/settings';
 @import './base/base';
-@import './components/busy-indicator';
 @import './components/footer';

src/tests/components/__snapshots__/BusyIndicator.test.js.snap

@@ -2,25 +2,14 @@
 
 exports[`should render BusyIndicator correctly 1`] = `
 <div
-  className="busy-indicator busy-indicator--md"
+  className="h-100 d-flex flex-column justify-content-center text-center"
 >
   <div
-    className="busy-indicator__content"
+    className=""
   >
-    <div
-      className="busy-indicator__heading"
-    >
-      <div
-        className="busy-indicator__title"
-      />
-    </div>
-    <div
-      className="busy-indicator__body"
-    >
-      <i
-        className="busy-indicator__icon fa fa-fw fa-spin fa-circle-o-notch"
-      />
-    </div>
+    <i
+      className="fas fa-spin fa-circle-notch"
+    />
   </div>
 </div>
 `;

src/tests/components/__snapshots__/LoadingPage.test.js.snap

@@ -2,10 +2,11 @@
 
 exports[`should render LoadingPage correctly 1`] = `
 <div
-  className="busy-indicator--full-page"
+  className="page-full"
 >
   <BusyIndicator
     size="xl"
+    title="Loading..."
   />
 </div>
 `;