Issue #54 -- Create a 'loading results' indicator.

src/overview/actions.js

@@ -9,6 +9,8 @@ import { ourState } from './selectors'
 
 export const setQuery = createAction('overview/setQuery')
 export const setSearchResult = createAction('overview/setSearchResult')
+export const showLoadIndicator = createAction('overview/showLoadIndicator')
+export const hideLoadIndicator = createAction('overview/hideLoadIndicator')
 
 
 // == Actions that trigger other actions ==
@@ -17,19 +19,27 @@ export const setSearchResult = createAction('overview/setSearchResult')
 export function init() {
     return function (dispatch, getState) {
         // Perform an initial search to populate the view (empty query = get all docs)
-        dispatch(refreshSearch())
+        dispatch(refreshSearch({showLoadingIndicator:true}))
 
         // Track database changes, to e.g. trigger search result refresh
         onDatabaseChange(change => dispatch(handlePouchChange({change})))
     }
 }
 
 // Search for docs matching the current query, update the results
-export function refreshSearch() {
+export function refreshSearch({showLoadingIndicator=false}) {
     return function (dispatch, getState) {
         const query = ourState(getState()).query
         const oldResult = ourState(getState()).searchResult
+        // To show a search was called for and to load the LoadingIndicator
+        if (showLoadingIndicator) {
+            dispatch(showLoadIndicator())
+        }
         filterVisitsByQuery({query}).then(searchResult => {
+            // To show the search ended and to stop the LoadingIndicator
+            if (showLoadingIndicator) {
+                dispatch(hideLoadIndicator())
+            }
             // First check if the query and result changed in the meantime.
             if (ourState(getState()).query !== query
                 && ourState(getState()).searchResult !== oldResult) {

src/overview/components/LoadingIndicator.css

@@ -0,0 +1,47 @@
+.container {
+	position: relative;
+	display: block;
+	width: 60px;
+	height: 60px;
+	margin: 20px auto;
+}
+
+.dot{
+	position: absolute;
+	display: inline-block;
+	height: 10px;
+	width: 10px;
+	border-radius: 50%;
+	background-color: grey;
+	bottom: 10%;
+	animation-name: move;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-timing-function: ease-out;
+}
+
+.dotone {
+	animation-delay: 0;
+}
+
+.dottwo {
+	left: 25%;
+	animation-delay: 0.2s;
+}
+
+.dotthree {
+	left: 50%;
+	animation-delay: 0.4s;
+}
+
+@keyframes move {
+	0% {
+	bottom: 10%;
+	}
+	50% {
+	bottom: 90%;
+	}
+	100% {
+	bottom: 10%;
+	}
+}

src/overview/components/LoadingIndicator.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import styles from './LoadingIndicator.css'
+import classNames from 'classnames'
+
+const LoadingIndicator = () => {
+	return (
+		<div className={styles.container}> 
+			<span className={classNames(styles.dotone, styles.dot)}></span>
+			<span className={classNames(styles.dottwo,styles.dot)}></span>
+			<span className={classNames(styles.dotthree,styles.dot)}></span>
+		</div>
+	)
+}
+
+export default LoadingIndicator

src/overview/components/Overview.jsx

@@ -4,6 +4,7 @@ import { connect } from 'react-redux'
 import * as actions from '../actions'
 import { ourState } from '../selectors'
 import ResultList from './ResultList'
+import LoadingIndicator from './LoadingIndicator'
 
 import styles from './Overview.css'
 
@@ -18,7 +19,7 @@ class Overview extends React.Component {
                 ref='inputQuery'
             >
             </input>
-            <ResultList searchResult={this.props.searchResult} />
+            {this.props.waitingForResults ?  <LoadingIndicator /> : <ResultList searchResult={this.props.searchResult} /> }
         </div>
     }
 
@@ -32,6 +33,7 @@ class Overview extends React.Component {
 const mapStateToProps = (state) => ({
     query: ourState(state).query,
     searchResult: ourState(state).searchResult,
+    waitingForResults: ourState(state).waitingForResults,
 })
 
 const mapDispatchToProps = (dispatch) => ({

src/overview/epics.js

@@ -8,10 +8,10 @@ import * as actions from './actions'
 export const refreshSearchResultsUponQueryChange = action$ => action$
     .ofType(actions.setQuery.getType())
     .debounceTime(500) // wait until typing stops for 500ms
-    .map(() => actions.refreshSearch())
+    .map(() => actions.refreshSearch({showLoadingIndicator:true}))
 
 // When the database changed, refresh the search results
 export const refreshSearchResultsUponLogChange = action$ => action$
     .ofType(actions.handlePouchChange.getType())
     .debounceTime(1000)
-    .map(() => actions.refreshSearch())
+    .map(() => actions.refreshSearch({showLoadingIndicator:false}))

src/overview/reducer.js

@@ -5,6 +5,7 @@ import * as actions from './actions'
 const defaultState = {
     searchResult: {rows: []},
     query: '',
+    waitingForResults: 0,
 }
 
 function setQuery(state, {query}) {
@@ -15,7 +16,17 @@ function setSearchResult(state, {searchResult}) {
     return {...state, searchResult}
 }
 
+function showLoadIndicator(state) {
+	return {...state, waitingForResults: state.waitingForResults+1}
+}
+
+function hideLoadIndicator(state) {
+    return {...state, waitingForResults: state.waitingForResults-1}
+}
+
 export default createReducer({
     [actions.setQuery]: setQuery,
     [actions.setSearchResult]: setSearchResult,
+    [actions.showLoadIndicator]: showLoadIndicator,
+    [actions.hideLoadIndicator]: hideLoadIndicator,
 }, defaultState)