stats: Add per-graph loading indicator

This commit ensures that size of each graph is the same before and
after the data is loaded. It also adds a loading indicator to each
graph until the data is loaded.

Fixes https://github.com/zulip/zulip/issues/6490

static/js/stats/stats.js

@@ -238,6 +238,7 @@ function populate_messages_sent_over_time(data) {
 
     function draw_or_update_plot(rangeselector, traces, last_value_is_partial, initial_draw) {
         $('#daily_button, #weekly_button, #cumulative_button').removeClass("selected");
+        $('#id_messages_sent_over_time > div').removeClass("spinner");
         if (initial_draw) {
             traces.human.visible = true;
             traces.bot.visible = 'legendonly';
@@ -463,6 +464,7 @@ function populate_messages_sent_by_client(data) {
     }
 
     function draw_plot() {
+        $('#id_messages_sent_by_client > div').removeClass("spinner");
         var data_ = plot_data[user_button][time_button];
         layout.height = layout.margin.b + data_.trace.x.length * 30;
         layout.xaxis.range = [0, Math.max.apply(null, data_.trace.x) * 1.3];
@@ -598,6 +600,7 @@ function populate_messages_sent_by_message_type(data) {
     }
 
     function draw_plot() {
+        $('#id_messages_sent_by_message_type > div').removeClass("spinner");
         Plotly.newPlot('id_messages_sent_by_message_type',
                        [plot_data[user_button][time_button].trace],
                        layout,
@@ -693,6 +696,8 @@ function populate_number_of_users(data) {
         visible: true,
     };
 
+    $('#id_number_of_users > div').removeClass("spinner");
+
     Plotly.newPlot('id_number_of_users', [trace], layout, {displayModeBar: false});
 
     document.getElementById('id_number_of_users').on('plotly_hover', function (data) {

static/styles/stats.css

@@ -106,10 +106,34 @@ hr {
     display: none;
 }
 
+#id_messages_sent_by_client {
+    min-height: 100px;
+    width: 750px;
+    position: relative;
+}
+
+#id_messages_sent_by_message_type {
+    height: 300px;
+    width: 750px;
+    position: relative;
+}
+
+#id_messages_sent_over_time {
+    height: 400px;
+    width: 750px;
+    position: relative;
+}
+
 #id_messages_sent_over_time[last_value_is_partial='true'] .points path:last-of-type {
     opacity: 0.5;
 }
 
+#id_number_of_users {
+    height: 370px;
+    width: 750px;
+    position: relative;
+}
+
 #users_hover_info,
 #hoverinfo {
     display: none;
@@ -155,6 +179,28 @@ hr {
     color: #aaa;
 }
 
+@keyframes spinner {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.spinner:before {
+    content: '';
+    box-sizing: border-box;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 30px;
+    height: 30px;
+    margin-top: -15px;
+    margin-left: -15px;
+    border-radius: 50%;
+    border: 1px solid #ccc;
+    border-top-color: #07d;
+    animation: spinner 1s linear infinite;
+}
+
 #users_hover_info,
 #hoverinfo {
     font-size: 0.8em;

templates/analytics/stats.html

@@ -27,7 +27,9 @@
             <button class="button" type="button" id='cumulative_button'>{{ _("Cumulative") }} </button>
           </div>
         </div>
-        <div id="id_messages_sent_over_time"></div>
+        <div id="id_messages_sent_over_time">
+          <div class="spinner"></div>
+        </div>
         <div id="hoverinfo">
             <span id="hover_date"></span>
             <span id="hover_me">{{ _("Me") }}:</span>
@@ -42,7 +44,9 @@
       <div class="chart-container pie-chart">
         <div id="pie_messages_sent_by_client">
           <h1>{{ _("Messages sent by client") }}</h1>
-          <div id="id_messages_sent_by_client" class="number-stat"></div>
+          <div id="id_messages_sent_by_client" class="number-stat">
+            <div class="spinner"></div>
+          </div>
           <div class="buttons">
             <button class="button" type="button" data-user="user">{{ _("Me") }}</button>
             <button class="button selected" type="button" data-user="realm">{{ _("Everyone") }}</button>
@@ -59,7 +63,9 @@
       <div class="chart-container pie-chart">
         <div id="pie_messages_sent_by_type">
           <h1>{{ _("Messages sent by recipient type") }}</h1>
-          <div id="id_messages_sent_by_message_type"></div>
+          <div id="id_messages_sent_by_message_type">
+            <div class="spinner"></div>
+          </div>
           <div id="pie_messages_sent_by_type_total" class="number-stat"></div>
           <div class="buttons">
             <button class="button" type="button" data-user="user">{{ _("Me") }}</button>
@@ -74,7 +80,9 @@
 
       <div class="chart-container">
         <h1>{{ _("Active users") }}</h1>
-        <div id="id_number_of_users"></div>
+        <div id="id_number_of_users">
+          <div class="spinner"></div>
+        </div>
         <div id="users_hover_info" class="number-stat">
           <span id="users_hover_date"></span>
           <b id="users_hover_humans">{{ _("Users") }}: </b>