diff --git a/web/components/DayBlock.jsx b/web/components/DayBlock.jsx index 9b9d020..64925fc 100644 --- a/web/components/DayBlock.jsx +++ b/web/components/DayBlock.jsx @@ -28,7 +28,7 @@ class DayBlock extends React.Component { } render() { - const { day, selected, onClick, currentTeamMember } = this.props + const { day, selected, onClick, currentTeamMember, fetchingData } = this.props return ( - {this.renderTinySetBlocks(currentTeamMember.weeklySetblocks, day)} + { // If you are waiting for the API to respond, it does not render + !fetchingData && this.renderTinySetBlocks(currentTeamMember.weeklySetblocks, day) + } diff --git a/web/components/Loading.js b/web/components/Loading.js new file mode 100644 index 0000000..e1284bc --- /dev/null +++ b/web/components/Loading.js @@ -0,0 +1,34 @@ +import React, { Component } from 'react'; +import styled, { keyframes } from 'styled-components'; + +const BounceAnimation = keyframes` + 0% { margin-bottom: 0; } + 50% { margin-bottom: 5px } + 100% { margin-bottom: 0 } +`; +const DotWrapper = styled.div` + display: flex; + align-items: flex-end; +`; +const Dot = styled.div` + background-color: rgb(46,73,122); + border-radius: 50%; + width: 4px; + height: 4px; + margin: 0 3px; + /* Animation */ + animation: ${BounceAnimation} 0.5s linear infinite; + animation-delay: ${props => props.delay}; +`; + +export default class LoadingDots extends Component { + render() { + return ( + + + + + + ) + } +} \ No newline at end of file diff --git a/web/components/SchedulePage.jsx b/web/components/SchedulePage.jsx index 33cc074..f129566 100644 --- a/web/components/SchedulePage.jsx +++ b/web/components/SchedulePage.jsx @@ -9,6 +9,7 @@ import SetBlock from './SetBlock'; import Text from './Text'; import { fetchCurrentTeamMemberById, setSelectedDay } from '../reducers/environment'; +import LoadingDots from './Loading'; class SchedulePage extends React.Component { state = { @@ -66,8 +67,42 @@ class SchedulePage extends React.Component { this.props.setSelectedDay(days[0]) } + renderIfItReady() { + const { + match, currentTeamMember, fetchingData, selectedDay + } = this.props + if (fetchingData) { + return ( // If you are waiting for the API to respond, render a loading + + Loading + + + ) + } else { + return ( + + + {match.params.teamMemberId ? currentTeamMember.name : 'Your'} + {' Schedule\'s Page'} + + {this.renderSetBlocks(selectedDay)} + + ) + } + } + render() { - const { match, currentTeamMember, selectedDay } = this.props; + const { selectedDay } = this.props; const { daysOfWeek } = this.state; return ( - - - {match.params.teamMemberId ? currentTeamMember.name : 'Your'} - {' Schedule\'s Page'} - - {this.renderSetBlocks(selectedDay)} - + {this.renderIfItReady()} ); diff --git a/web/reducers/environment.js b/web/reducers/environment.js index 0cda5fa..44bc7c4 100644 --- a/web/reducers/environment.js +++ b/web/reducers/environment.js @@ -6,13 +6,18 @@ import api from 'scripts/api' const RECEIVE_TEAM_MEMBERS = 'RECEIVE_TEAM_MEMBERS' const RECEIVE_TEAM_MEMBER = 'RECEIVE_TEAM_MEMBER' const SET_SELECTED_DAY = 'SET_SELECTED_DAY' -const GOTO_SCHEDULE_DAY = 'GOTO_SCHEDULE_DAY' +const FETCHING_DATA = 'FETCHING_DATA' // Reducer const initialState = { teamMembers: [], - currentTeamMember: {}, - selectedDay: moment.now() + currentTeamMember: { + id: '', + name: '', + weeklySetblocks: [] + }, + selectedDay: moment.now(), + fetchingData: false } export default function reducer(state = initialState, action) { @@ -32,6 +37,11 @@ export default function reducer(state = initialState, action) { ...state, selectedDay: action.selectedDay } + case FETCHING_DATA: + return { + ...state, + fetchingData: action.fetchingData + } default: return state } @@ -39,7 +49,9 @@ export default function reducer(state = initialState, action) { // Actions export function fetchAllTeamMembers(params) { + return dispatch => { + dispatch(setFetchingData(true)) api.graph({ query: `query { teamMembers { @@ -52,6 +64,7 @@ export function fetchAllTeamMembers(params) { // Handle payload // Dispatch additional actions dispatch(receiveTeamMembers(payload.teamMembers)) + dispatch(setFetchingData(false)) }) .catch(err => { // Handle error @@ -61,6 +74,7 @@ export function fetchAllTeamMembers(params) { export function fetchCurrentTeamMemberById(params) { return dispatch => { + dispatch(setFetchingData(true)) api.graph({ query: `query { teamMemberById(id: "${params.id}") { @@ -80,6 +94,7 @@ export function fetchCurrentTeamMemberById(params) { // Handle payload // Dispatch additional actions dispatch(receiveTeamMember(payload.teamMemberById)) + dispatch(setFetchingData(false)) }) .catch(err => { // Handle error @@ -107,4 +122,11 @@ export function setSelectedDay(selectedDay) { type: SET_SELECTED_DAY, selectedDay } +} + +export function setFetchingData(fetchingData) { + return { + type: FETCHING_DATA, + fetchingData + } } \ No newline at end of file