docs(website): add loader to pages

Author: christianalfoni

packages/overmind-website/src/components/Guides/index.tsx

@@ -1,10 +1,15 @@
 import { createElement, SFC } from 'react'
 import { useOvermind } from '../../overmind'
 import * as styles from './styles'
+import Loader from '../Loader'
 
 const Guides: SFC = () => {
   const { state } = useOvermind()
 
+  if (state.isLoadingGuides) {
+    return <Loader />
+  }
+
   return (
     <div className={styles.wrapper}>
       {state.guides.map((guide) => (

packages/overmind-website/src/components/Loader/index.tsx

@@ -0,0 +1,13 @@
+import { createElement, SFC } from 'react'
+import * as styles from './styles'
+
+const Loader: SFC = () => (
+  <div className={styles.wrapper}>
+    <div className={styles.circle} />
+    <div className={styles.innerCircle} />
+    <div className={styles.block} />
+    <div className={styles.text}>loading</div>
+  </div>
+)
+
+export default Loader

packages/overmind-website/src/components/Loader/styles.ts

@@ -0,0 +1,46 @@
+import { css } from 'emotion'
+
+export const wrapper = css`
+  position: fixed;
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-family: monospace;
+  color: var(--color-dark-1);
+  top: calc(50vh - 100px);
+`
+
+export const circle = css`
+  position: absolute;
+  background-color: #eaeaea;
+  border-radius: 50%;
+  width: 125px;
+  height: 125px;
+  box-shadow: 0 0 0 rgba(206, 206, 206, 0.4);
+  animation: pulse 2s infinite 0.5s;
+`
+
+export const innerCircle = css`
+  position: absolute;
+  background-color: var(--color-white-1);
+  border-radius: 50%;
+  width: 100px;
+  height: 100px;
+`
+
+export const block = css`
+  position: absolute;
+  background-color: var(--color-white-1);
+  height: 25px;
+  width: 125px;
+`
+
+export const text = css`
+  position: absolute;
+  color: #eaeaea;
+  text-transform: uppercase;
+  letter-spacing: 10px;
+  text-indent: 10px;
+`

packages/overmind-website/src/overmind/actions.ts

@@ -12,14 +12,18 @@ export const openHome: Action<RouteContext> = async ({ state, request }) => {
 export const openGuides: Action<RouteContext> = async ({ state, request }) => {
   state.page = Page.GUIDES
   if (!state.guides.length) {
+    state.isLoadingGuides = true
     state.guides = await request('/backend/guides')
+    state.isLoadingGuides = false
   }
 }
 
 export const openVideos: Action<RouteContext> = async ({ state, request }) => {
   state.page = Page.VIDEOS
   if (!state.videos.length) {
+    state.isLoadingVideos = true
     state.videos = await request('/backend/videos')
+    state.isLoadingVideos = false
   }
 }
 
@@ -47,7 +51,9 @@ export const openApi: Action<RouteContext<VideoParams>> = async ({
   state.page = Page.API
   state.currentApi = routeContext.params.title
   if (!state.apis.length) {
+    state.isLoadingApis = true
     state.apis = await request('/backend/apis')
+    state.isLoadingApis = false
   }
 }
 

packages/overmind-website/src/overmind/state.ts

@@ -24,6 +24,9 @@ type State = {
   isLoadingSearchResult: boolean
   searchResult: SearchResult[]
   showSearchResult: boolean
+  isLoadingGuides: boolean
+  isLoadingApis: boolean
+  isLoadingVideos: boolean
 }
 
 const state: State = {
@@ -42,6 +45,9 @@ const state: State = {
   isLoadingSearchResult: false,
   searchResult: [],
   showSearchResult: false,
+  isLoadingGuides: false,
+  isLoadingApis: false,
+  isLoadingVideos: false,
 }
 
 export default state