fix: made loading texts more discrete, fixed element growth after loading (causing UI to "jump")

Author: ErikBjare

src/visualizations/Summary.vue

@@ -1,7 +1,8 @@
 <template lang="pug">
 div
   div.aw-summary-container
-  div(v-if="fields && fields.length > 0 && with_limit && fields.length > limit_")
+  // Use visibility to make sure elements don't skip when data finishes loading
+  div(:style='{"visibility": visible ? "visible" : "hidden"}')
     b-button.mt-1(size="sm", variant="outline-secondary", @click="limit_ += 5")
       icon(name="angle-double-down")
       | Show more
@@ -46,6 +47,13 @@ export default {
   data: function () {
     return { limit_: this.limit };
   },
+  computed: {
+    visible() {
+      return (
+        this.fields && this.fields.length > 0 && this.with_limit && this.fields.length > this.limit_
+      );
+    },
+  },
   watch: {
     fields: function () {
       this.update();

src/visualizations/periodusage.js

@@ -18,12 +18,13 @@ function set_status(svg_elem, msg) {
 
   svg
     .append('text')
-    .attr('x', '5pt')
+    .attr('x', '50%')
     .attr('y', '25pt')
     .text(msg)
     .attr('font-family', 'sans-serif')
     .attr('font-size', '20pt')
-    .attr('fill', 'black');
+    .attr('text-anchor', 'middle')
+    .attr('fill', '#AAA');
 }
 
 const diagramcolor = '#aaa';

src/visualizations/summary.js

@@ -31,8 +31,8 @@ function set_status(container, msg) {
     .attr('y', '25px')
     .text(msg)
     .attr('font-family', 'sans-serif')
-    .attr('font-size', '25px')
-    .attr('fill', textColor);
+    .attr('font-size', '20px')
+    .attr('fill', '#999');
 }
 
 function update(container, apps) {