From 10149b75ccde1da2f174093b22cae1cd7a9fb309 Mon Sep 17 00:00:00 2001
From: Utkarsh Patil <utkarsh2305@gmail.com>
Date: Sun, 3 Dec 2017 15:21:05 +0400
Subject: [PATCH] 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       |  5 ++++
 static/styles/stats.css        | 46 ++++++++++++++++++++++++++++++++++
 templates/analytics/stats.html | 16 +++++++++---
 3 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/static/js/stats/stats.js b/static/js/stats/stats.js
index 70c435e9c8..e009735e33 100644
--- a/static/js/stats/stats.js
+++ b/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) {
diff --git a/static/styles/stats.css b/static/styles/stats.css
index 9c25808c57..30fc488d06 100644
--- a/static/styles/stats.css
+++ b/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;
diff --git a/templates/analytics/stats.html b/templates/analytics/stats.html
index 082da395a3..7198341440 100644
--- a/templates/analytics/stats.html
+++ b/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>