Add css spinner

src/components/About.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import {Spinner} from '.';
 import '../static/stylesheets/globals.scss';
 import styles from './About.scss';
 import contentStyle from '../static/stylesheets/content.scss';
@@ -9,7 +10,7 @@ export default class About extends Component {
     if (this.props.isLoading) {
       return (
         <div className={contentStyle.contentWrapper}>
-          <h1>Loading</h1>
+          <Spinner/>
         </div>
       );
     }

src/components/Blog.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import {Spinner} from '.';
 import '../static/stylesheets/globals.scss';
 import styles from './Blog.scss';
 import contentStyle from '../static/stylesheets/content.scss';
@@ -6,10 +7,10 @@ import contentStyle from '../static/stylesheets/content.scss';
 export default class Blog extends Component {
 
   render() {
-    if (this.props.isLoading) {
+    if (this.props.isLoading || true) {
       return (
         <div className={contentStyle.contentWrapper}>
-          <h1>Loading</h1>
+          <Spinner/>
         </div>
       );
     }

src/components/Post.js

@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import {Spinner} from '.';
 import '../static/stylesheets/globals.scss';
 import contentStyle from '../static/stylesheets/content.scss';
 import styles from './Post.scss';
@@ -8,7 +9,9 @@ export default class Post extends Component {
 
     if (this.props.isLoading) {
       return (
-        <h1>Loading</h1>
+        <div className={contentStyle.contentWrapper}>
+          <Spinner/>
+        </div>
       );
     }
 

src/components/Spinner.js

@@ -0,0 +1,16 @@
+import React, {Component} from 'react';
+import '../static/stylesheets/globals.scss';
+import styles from './Spinner.scss';
+
+export default class Spinner extends Component {
+  render() {
+    return (
+      <div class={styles.ldsEllipsis}>
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    )
+  }
+}

src/components/Spinner.scss

@@ -0,0 +1,59 @@
+/*
+  from https://loading.io/css/
+*/
+
+.ldsEllipsis {
+  display: inline-block;
+  position: relative;
+  width: 64px;
+  height: 64px;
+}
+.ldsEllipsis div {
+  position: absolute;
+  top: 27px;
+  width: 11px;
+  height: 11px;
+  border-radius: 50%;
+  background: #fff;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.ldsEllipsis div:nth-child(1) {
+  left: 6px;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.ldsEllipsis div:nth-child(2) {
+  left: 6px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.ldsEllipsis div:nth-child(3) {
+  left: 26px;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.ldsEllipsis div:nth-child(4) {
+  left: 45px;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(19px, 0);
+  }
+}

src/components/index.js

@@ -3,4 +3,5 @@ export { default as Blog } from './Blog';
 export { default as About } from './About';
 export { default as Post } from './Post';
 export { default as NotFoundPage } from './NotFoundPage';
+export { default as Spinner } from './Spinner';
 export { default as App } from './App';