Add spinner for result table

src/client/containers/MapApp.js

@@ -11,6 +11,8 @@ import LeafletMap from '../components/map/LeafletMap';
 import GMap from '../components/map/GMap';
 import Pie from '../components/Pie';
 import TopBar from '../components/TopBar';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import purple from '@material-ui/core/colors/purple';
 
 import {
   //getVisibleResults,
@@ -93,6 +95,11 @@ const styles = theme => ({
     width: '100%',
     height: '100%',
   },
+  progress: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
   footer: {
     position: 'absolute',
     borderTop: '4px solid' + theme.palette.primary.main,
@@ -137,33 +144,46 @@ let MapApp = (props) => {
   // console.log('resultFormat', resultFormat)
   // console.log('mapMode', mapMode)
   //console.log(props.results)
-  console.log(manuscripts)
+  //console.log(manuscripts)
 
   let table = '';
-  if ((oneColumnView && options.resultFormat === 'table') || (!oneColumnView)) {
+  if (search.fetchingManuscripts) {
+    const tableClass = oneColumnView ? classes.resultTableOneColumn : classes.resultTable;
+
+
     table = (
-      <div className={oneColumnView ? classes.resultTableOneColumn : classes.resultTable}>
-        <VirtualizedTable
-          list={Immutable.List(manuscripts)}
-          resultValues={resultValues}
-          search={search}
-          sortResults={props.sortResults}
-          updateResultsFilter={props.updateResultsFilter}
-          updateQuery={props.updateQuery}
-          fetchManuscripts={props.fetchManuscripts}
-          clearManuscripts={props.clearManuscripts}
-          fetchPlaces={props.fetchPlaces}
-          clearPlaces={props.clearPlaces}
-          fetchSuggestions={props.fetchSuggestions}
-          clearSuggestions={props.clearSuggestions}
-          bounceMarker={props.bounceMarker}
-          openMarkerPopup={props.openMarkerPopup}
-          removeTempMarker={props.removeTempMarker}
-        />
+      <div className={[tableClass, classes.progress].join(' ')}>
+        <CircularProgress style={{ color: purple[500] }} thickness={7} />
       </div>
     );
+  } else {
+    if ((oneColumnView && options.resultFormat === 'table') || (!oneColumnView)) {
+      table = (
+        <div className={oneColumnView ? classes.resultTableOneColumn : classes.resultTable}>
+          <VirtualizedTable
+            list={Immutable.List(manuscripts)}
+            resultValues={resultValues}
+            search={search}
+            sortResults={props.sortResults}
+            updateResultsFilter={props.updateResultsFilter}
+            updateQuery={props.updateQuery}
+            fetchManuscripts={props.fetchManuscripts}
+            clearManuscripts={props.clearManuscripts}
+            fetchPlaces={props.fetchPlaces}
+            clearPlaces={props.clearPlaces}
+            fetchSuggestions={props.fetchSuggestions}
+            clearSuggestions={props.clearSuggestions}
+            bounceMarker={props.bounceMarker}
+            openMarkerPopup={props.openMarkerPopup}
+            removeTempMarker={props.removeTempMarker}
+          />
+        </div>
+      );
+    }
   }
 
+
+
   let mapElement = '';
   if ((oneColumnView && options.resultFormat === 'map') || (!oneColumnView)) {
     if (options.mapMode === 'heatmap') {

src/client/reducers/search.js

@@ -48,7 +48,8 @@ export const INITIAL_STATE = {
   sortDirection: 'asc',
   groupBy: 'label',
   resultsQuery: '',
-  fetchingResults: false,
+  fetchingPlaces: false,
+  fetchingManuscripts: false
 };
 
 const search = (state = INITIAL_STATE, action) => {
@@ -71,8 +72,9 @@ const search = (state = INITIAL_STATE, action) => {
     case FETCH_SUGGESTIONS:
       return { ...state, fetchingSuggestions: true };
     case FETCH_MANUSCRIPTS:
+      return { ...state, fetchingManuscripts: true };
     case FETCH_PLACES:
-      return { ...state, fetchingResults: true };
+      return { ...state, fetchingPlaces: true };
     case CLEAR_SUGGESTIONS:
       return {
         ...state,
@@ -92,28 +94,28 @@ const search = (state = INITIAL_STATE, action) => {
         ...state,
         manuscripts: action.manuscripts,
         //resultsQuery: state.query,
-        fetchingResults: false
+        fetchingManuscripts: false
       };
     case UPDATE_PLACES:
       return {
         ...state,
         places: action.places,
         //resultsQuery: state.query,
-        fetchingResults: false
+        fetchingPlaces: false
       };
     case CLEAR_MANUSCRIPTS:
       return {
         ...state,
         'manuscripts': [],
         resultsQuery: '',
-        fetchingResults: false
+        fetchingManuscripts: false
       };
     case CLEAR_PLACES:
       return {
         ...state,
         'places': {},
         resultsQuery: '',
-        fetchingResults: false
+        fetchingPlaces: false
       };
     case UPDATE_RESULTS_FILTER:
       return updateResultsFilter(state, action);

src/server/sparql/Datasets.js

@@ -4,8 +4,8 @@ module.exports = {
     'title': 'MMM',
     'shortTitle': 'MMM',
     'timePeriod': '',
-    //'endpoint': 'http://ldf.fi/mmm-sdbm-cidoc/sparql',
-    'endpoint': 'http://localhost:3034/ds/sparql',
+    'endpoint': 'http://ldf.fi/mmm-sdbm-cidoc/sparql',
+    //'endpoint': 'http://localhost:3034/ds/sparql',
     'allQuery': `
       PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
       PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>