[#161]add basic loading indicator component and include it in the data view

components/dataRepresentation/index.html

@@ -26,6 +26,7 @@
     </tbody>
 </table>
 
-<div v-if="countDataSets == 0" class="noDataInfo">{{ 'No Data available' | i18n }}</div>
+<div v-if="countDataSets == 0 && initialDataLoaded" class="noDataInfo">{{ 'No Data available' | i18n }}</div>
+<div v-if="countDataSets == 0 && !initialDataLoaded" v-component="loadingIndicator"></div>
 
 <button v-if="isInteractive && countDataSets > 0" type="button" class="dataRepresentationActionButton btn" v-class="btn-share: countSelected === 0, btn-remove: countSelected >= 1, " v-on="click: actionButton()"></button>

components/dataRepresentation/index.js

@@ -5,7 +5,8 @@ module.exports = {
         isInteractive: true,
         sortOldest: false,
         sortKey: 'submitted',
-        sortOptions: ['Newest', 'Oldest']
+        sortOptions: ['Newest', 'Oldest'],
+        initialDataLoaded: false
     },
     methods: {
         formatUnixTime: function(unix) {

components/dataRepresentation/index.less

@@ -118,5 +118,4 @@
         font-size: 14px;
         color: @darkGrey;
     }
-
 }

lib/view.js

@@ -13,7 +13,8 @@ var componentList = {
     slideToggle: require('../components/slide-toggle'),
     alert: require('../components/alert'),
     dataRepresentation: require('../components/dataRepresentation'),
-    switch: require('../components/switch')
+    switch: require('../components/switch'),
+    loadingIndicator: require('../components/loadingIndicator')
 };
 
 // Add all blocks

views/data/index.html

@@ -1,6 +1,6 @@
 <div v-component="navigationBar" v-with="title: app.name"></div>
 <div v-if="!app.id" v-component="alert" type="error" message="errorAppNotFound"></div>
 <div v-if="app.id">
-	<div v-component="dataRepresentation" v-with="dataSet : currentDataSets"></div>
+	<div v-component="dataRepresentation" v-with="dataSet : currentDataSets, initialDataLoaded : initialDataLoaded"></div>
 	<div v-component="makeBar" v-with="app"></div>
 </div>

views/data/index.js

@@ -6,6 +6,9 @@ var Data = require('../../lib/data');
 module.exports = view.extend({
     id: 'data',
     template: require('./index.html'),
+    data: {
+      initialDataLoaded: false
+    },
     created: function () {
         var self = this;
 
@@ -22,6 +25,7 @@ module.exports = view.extend({
 
 		self.currentDataSets = [];
 		data.getAllDataSets(function(currentDataSets) {
+            self.$data.initialDataLoaded = true;
 			self.currentDataSets = currentDataSets;
 		});
     }