Merge pull request #139 from partio-scout/feature/loadspinner-for-par…

…ticipant-details

Show load spinner on details page when loading

src/client/components/ParticipantDetailsPage/ParticipantDetailsPage.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import moment from 'moment';
+import Spinner from 'react-spinner';
 import { Row, Col, Panel, Button } from 'react-bootstrap';
 import { Presence } from '../../components';
 import { ParticipantDates } from './ParticipantDates';
@@ -223,7 +224,7 @@ export function getParticipantDetailsPage(participantStore, participantActions)
         );
       } else {
         return (
-          <div></div>
+          <Spinner />
         );
       }
     }

src/client/stores/ParticipantStore.js

@@ -4,6 +4,7 @@ export function getParticipantStore(alt, ParticipantActions, RegistryUserActions
       this.resetAllData();
 
       this.bindListeners({
+        handleFetchParticipantById: ParticipantActions.FETCH_PARTICIPANT_BY_ID,
         handleUpdateParticipantById: ParticipantActions.UPDATE_PARTICIPANT_BY_ID,
         handleLoadParticipantList: ParticipantActions.LOAD_PARTICIPANT_LIST,
         handleParticipantListUpdated: ParticipantActions.PARTICIPANT_LIST_UPDATED,
@@ -12,6 +13,10 @@ export function getParticipantStore(alt, ParticipantActions, RegistryUserActions
       });
     }
 
+    handleFetchParticipantById() {
+      this.participantDetails = undefined;
+    }
+
     handleUpdateParticipantById(participant) {
       this.participantDetails = participant;
     }
@@ -40,7 +45,7 @@ export function getParticipantStore(alt, ParticipantActions, RegistryUserActions
 
     resetAllData() {
       this.participants = undefined;
-      this.participantDetails = {};
+      this.participantDetails = undefined;
       this.participantCount = undefined;
 
       this.localGroups = [''];