Added vue-wait

ICIJ · Mar 19, 2020 · f9a3bcd · f9a3bcd
1 parent ebe613f
commit f9a3bcd
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 26 deletions.
diff --git a/src/components/WidgetCreationDateOverTime.vue b/src/components/WidgetCreationDateOverTime.vue
@@ -7,16 +7,21 @@
       </div>
     </div>
     <div class="widget__content" :class="{ 'card-body': widget.card }">
-      <div class="widget__content__chart">
-        <svg :height="height" width="100%" shape-rendering="crispEdges">
-          <g :style="{ transform: `translate(${margin.left}px, ${margin.top}px)` }">
-            <g class="widget__content__chart__axis widget__content__chart__axis--x" :style="{ transform: `translate(0px, ${this.innerHeight}px)` }"></g>
-            <g class="widget__content__chart__axis widget__content__chart__axis--y"></g>
-            <g class="widget__content__chart__bars">
-              <rect v-for="(bar, index) in bars" :key="index" :x="bar.x" :y="bar.y" :height="bar.height" :width="bar.width"></rect>
+      <div class="widget__content__chart align-items-center">
+        <v-wait for="loading creationDate data">
+          <div class="widget__content__chart__spinner" slot="waiting">
+            <fa icon="circle-notch" spin size="2x" />
+          </div>
+          <svg :height="height" width="100%" shape-rendering="crispEdges">
+            <g :style="{ transform: `translate(${margin.left}px, ${margin.top}px)` }">
+              <g class="widget__content__chart__axis widget__content__chart__axis--x" :style="{ transform: `translate(0px, ${this.innerHeight}px)` }"></g>
+              <g class="widget__content__chart__axis widget__content__chart__axis--y"></g>
+              <g class="widget__content__chart__bars">
+                <rect v-for="(bar, index) in bars" :key="index" :x="bar.x" :y="bar.y" :height="bar.height" :width="bar.width"></rect>
+              </g>
             </g>
-          </g>
-        </svg>
+          </svg>
+        </v-wait>
       </div>
     </div>
   </div>
@@ -30,6 +35,7 @@ import ResizeObserver from 'resize-observer-polyfill'
 import sortBy from 'lodash/sortBy'
 import * as d3 from 'd3'
 import { mapState } from 'vuex'
+import { waitFor } from 'vue-wait'
 
 export default {
   name: 'WidgetCreationDateOverTime',
@@ -97,7 +103,7 @@ export default {
     }
   },
   methods: {
-    async loadData () {
+    loadData: waitFor('loading creationDate data', async function () {
       const response = await this.$store.dispatch('search/queryFilter', { name: 'creationDate', options: { size: 1000 } })
       const aggregation = get(response, ['aggregations', 'metadata.tika_metadata_creation_date', 'buckets'])
       const dates = map(aggregation, d => {
@@ -107,7 +113,7 @@ export default {
         }
       })
       return sortBy(compact(dates), ['key'])
-    },
+    }),
     buildChart () {
       // Refresh the width so all computed properties that are dependent of
       //  this value are refreshed (including scale functions)
@@ -126,6 +132,7 @@ export default {
       // Build the chart when its container is resized
       const observer = new ResizeObserver(this.buildChart)
       observer.observe(this.container)
+      this.buildChart()
     }
   }
 }
@@ -135,24 +142,49 @@ export default {
   .widget {
     min-height: 100%;
 
-    &__content__chart {
-      svg {
-        font-family: $font-family-base;
-      }
+    &__content {
 
-      rect {
-        fill: $primary;
-      }
+      &__chart {
+        position: relative;
+        padding-top: 50%;
+        width: 100%;
 
-      &__axis {
+        &__spinner {
+          position: absolute;
+          top: 0%;
+          left: 0%;
+          width: 100%;
+          height: 100%;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .card & {
+            background: $card-bg;
+          }
+        }
 
-        .tick line {
-          color: $gray-300;
+        svg:not(.svg-inline--fa) {
+          position: absolute;
+          top: 0%;
+          left: 0%;
+          font-family: $font-family-base;
         }
 
-        .domain,
-        &--x .tick line {
-          display: none;
+        rect {
+          fill: $primary;
+        }
+
+        &__axis {
+
+          .tick line {
+            color: $gray-300;
+          }
+
+          .domain,
+          &--x .tick line {
+            display: none;
+          }
         }
       }
     }

diff --git a/src/utils/animations.scss b/src/utils/animations.scss
@@ -1,6 +1,8 @@
-.fade-enter-active, .fade-leave-active {
+.fade-enter-active,
+.fade-leave-active {
   transition: opacity .5s;
 }
-.fade-enter, .fade-leave-to {
+.fade-enter,
+.fade-leave-to {
   opacity: 0;
 }