Show/unshow throbber when data is loading

web_external/image/icon/index.js

@@ -15,6 +15,7 @@ import scatterplotIcon from './scatterplot.svg';
 import shareIcon from './share.svg';
 import swapIcon from './swap.svg';
 import warningIcon from './warning.svg';
+import throbberIcon from './throbber.gif';
 
 export {
   closeIcon,
@@ -33,5 +34,6 @@ export {
   scatterplotIcon,
   shareIcon,
   swapIcon,
-  warningIcon
+  warningIcon,
+  throbberIcon
 };

web_external/index.js

@@ -138,6 +138,12 @@ observeStore(next => {
   }
 }, s => s.get('project'));
 
+// Show "data loading" throbber.
+observeStore(next => {
+  const loading = next.getIn(['dataset', 'loading']);
+  datasetPanel.showThrobber(loading);
+}, s => s.getIn(['dataset', 'loading']));
+
 // Display changed data.
 observeStore(next => {
   console.log(next.getIn(['dataset', 'data']));

web_external/redux/action/actionspec.yml

@@ -20,6 +20,9 @@ closeProject: []
 updateProjectName:
   - name
 
+datasetLoading:
+  - loading
+
 setData:
   - data
 

web_external/redux/reducer/index.js

@@ -18,6 +18,7 @@ const initial = Immutable.fromJS({
     dataset: null
   },
   dataset: {
+    loading: false,
     data: null
   },
   libPaths: {
@@ -99,6 +100,10 @@ const reducer = (state = initial, action = {}) => {
       newState = newState.setIn(['project', 'name'], action.name);
       break;
 
+    case actionType.datasetLoading:
+      newState = newState.setIn(['dataset', 'loading'], action.loading);
+      break;
+
     case actionType.setData:
       newState = newState.setIn(['dataset', 'data'], action.data);
       break;

web_external/view/overlay/OpenProjectDialog/index.js

@@ -50,6 +50,8 @@ class OpenProjectDialog {
         store.dispatch(action.openProject(project.id, project.name, project.visibility));
 
         if (project.dataset) {
+          store.dispatch(action.datasetLoading(true));
+
           restRequest({
             type: 'GET',
             path: `/item/${project.dataset}/download`,
@@ -60,6 +62,7 @@ class OpenProjectDialog {
               dynamicTyping: true
             });
 
+            store.dispatch(action.datasetLoading(false));
             store.dispatch(action.setData(results.data));
           });
         }

web_external/view/panel/DatasetPanel/index.jade

@@ -8,7 +8,7 @@
       img(src=swapIcon title="Click to select a different dataset")
       img.disabled(src=gearIcon title="Dataset filter and paging settings")
       img.new(src=infoIcon title="About this panel")
-      img.warning(src=warningIcon title="Something isn't quite right; click for details")
+      img.status.warning(src=warningIcon title="Something isn't quite right; click for details")
 
 .content
   img.no-dataset.empty-state-helper(src=noDataset style="display: none;")

web_external/view/panel/DatasetPanel/index.js

@@ -8,6 +8,7 @@ import { datasetIcon,
          swapIcon,
          gearIcon,
          infoIcon,
+         throbberIcon,
          warningIcon } from '~reslab/image/icon';
 
 import { action,
@@ -31,6 +32,13 @@ class DatasetPanel {
       store.dispatch(action.togglePanel('dataset'));
     });
   }
+
+  showThrobber (loading) {
+    this.el.select('img.status')
+      .classed('warning', !loading)
+      .classed('show-color', loading)
+      .attr('src', loading ? throbberIcon : warningIcon);
+  }
 }
 
 const datasetPanel = new DatasetPanel();

web_external/view/panel/DatasetPanel/index.styl

@@ -46,3 +46,8 @@
 
   .page
     fill: $dataCurrentPageColor;
+
+#dataset-panel .indicator-icons
+  img.status.show-color
+    -webkit-filter url(#drop-shadow);
+    filter url(#drop-shadow);

webpack.helper.js

@@ -77,7 +77,7 @@ module.exports = function (config, data) {
       loaders: ['style-loader', 'css-loader', 'stylus-loader']
     },
     {
-      test: /\.svg$|\.png$/,
+      test: /\.svg$|\.png$|\.gif$/,
       include: sourceDirs,
       loader: 'url-loader'
     }