Merge branch '3314-widgets-loading-state' into 'develop'

Implement individual widget loading spinners

See merge request baserow/baserow!3031

web-frontend/modules/core/assets/scss/components/dashboard/dashboard_widget.scss

@@ -23,6 +23,21 @@
   }
 }
 
+.dashboard-widget__loading {
+  min-height: 122.4px;
+  position: relative;
+
+  &::after {
+    @include loading;
+    @include absolute(50%, 50%, auto, auto);
+
+    content: '';
+    visibility: visible;
+    margin-top: -6px;
+    margin-right: -6px;
+  }
+}
+
 .dashboard-widget__name {
   @include elevation($elevation-low);
   @include absolute(-37px, auto, auto, 0);

web-frontend/modules/dashboard/components/widget/DashboardWidget.vue

@@ -12,10 +12,14 @@
     </div>
     <component
       :is="widgetComponent(widget.type)"
+      v-if="isLoading === false"
       :dashboard="dashboard"
       :widget="widget"
       :store-prefix="storePrefix"
     />
+    <div v-else>
+      <div class="dashboard-widget__loading"></div>
+    </div>
   </div>
 </template>
 
@@ -57,6 +61,12 @@ export default {
         `${this.storePrefix}dashboardApplication/isEditMode`
       ]
     },
+    isLoading() {
+      return this.widgetType.isLoading(
+        this.widget,
+        this.$store.getters[`${this.storePrefix}dashboardApplication/getData`]
+      )
+    },
   },
   methods: {
     widgetComponent(type) {

web-frontend/modules/dashboard/pages/dashboard.vue

@@ -30,24 +30,23 @@ export default {
         'workspace/selectById',
         dashboard.workspace.id
       )
-      const forEditing = app.$hasPermission(
-        'application.update',
-        dashboard,
-        dashboard.workspace.id
-      )
-      await store.dispatch('dashboardApplication/fetchInitial', {
-        dashboardId: dashboard.id,
-        forEditing,
-      })
       data.workspace = workspace
       data.dashboard = dashboard
-      await store.dispatch('dashboardApplication/setLoading', false)
     } catch (e) {
       return error({ statusCode: 404, message: 'Dashboard not found.' })
     }
     return data
   },
   mounted() {
+    const forEditing = this.$hasPermission(
+      'application.update',
+      this.dashboard,
+      this.dashboard.workspace.id
+    )
+    this.$store.dispatch('dashboardApplication/fetchInitial', {
+      dashboardId: this.dashboard.id,
+      forEditing,
+    })
     this.$realtime.subscribe('dashboard', { dashboard_id: this.dashboard.id })
   },
   beforeDestroy() {

web-frontend/modules/dashboard/store/dashboardApplication.js

@@ -118,6 +118,7 @@ export const actions = {
     })
   },
   async updateDataSource({ commit, dispatch }, { dataSourceId, values }) {
+    commit('UPDATE_DATA', { dataSourceId, values: null })
     const { data } = await DataSourceService(this.$client).update(
       dataSourceId,
       values
@@ -139,6 +140,7 @@ export const actions = {
     data.forEach((widget) => {
       commit('ADD_WIDGET', widget)
     })
+    await dispatch('setLoading', false)
     await dispatch('fetchNewDataSources', dashboardId)
 
     if (forEditing) {
@@ -176,6 +178,7 @@ export const actions = {
     dispatch('selectWidget', createdWidget.id)
   },
   async dispatchDataSource({ commit }, dataSourceId) {
+    commit('UPDATE_DATA', { dataSourceId, values: null })
     try {
       const { data } = await DataSourceService(this.$client).dispatch(
         dataSourceId
@@ -221,6 +224,9 @@ export const getters = {
       (dataSource) => dataSource.id === dataSourceId
     )
   },
+  getData(state) {
+    return state.data
+  },
   getDataForDataSource: (state, getters) => (dataSourceId) => {
     return state.data[dataSourceId]
   },

web-frontend/modules/dashboard/widgetTypes.js

@@ -32,6 +32,10 @@ export class WidgetType extends Registerable {
   get settingsComponent() {
     return null
   }
+
+  isLoading(widget, data) {
+    return false
+  }
 }
 
 export class SummaryWidgetType extends WidgetType {
@@ -54,4 +58,12 @@ export class SummaryWidgetType extends WidgetType {
   get settingsComponent() {
     return SummaryWidgetSettings
   }
+
+  isLoading(widget, data) {
+    const dataSourceId = widget.data_source_id
+    if (data[dataSourceId] && Object.keys(data[dataSourceId]).length !== 0) {
+      return false
+    }
+    return true
+  }
 }