From 0c9c88fc0bf9d1e2d525163612f30a5395c9581a Mon Sep 17 00:00:00 2001
From: Simon <simobilleter@gmail.com>
Date: Sat, 2 Sep 2023 16:31:43 +0700
Subject: [PATCH] buildStats async

---
 tubearchivist/home/templates/home/settings.html | 12 +++++++++---
 tubearchivist/static/stats.js                   | 16 ++++++++++++++--
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/tubearchivist/home/templates/home/settings.html b/tubearchivist/home/templates/home/settings.html
index 3d2bafd..8d0c677 100644
--- a/tubearchivist/home/templates/home/settings.html
+++ b/tubearchivist/home/templates/home/settings.html
@@ -6,15 +6,21 @@
 </div>
 <div class="settings-item">
     <h2>Main overview</h2>
-    <div id="primaryBox" class="info-box info-box-4"></div>
+    <div id="primaryBox" class="info-box info-box-4">
+        <p id="loading">Loading...</p>
+    </div>
 </div>
 <div class="settings-item">
     <h2>Watch Progress</h2>
-    <div id="watchBox" class="info-box info-box-3"></div>
+    <div id="watchBox" class="info-box info-box-3">
+        <p id="loading">Loading...</p>
+    </div>
 </div>
 <div class="settings-item">
     <h2>Download History</h2>
-    <div id="downHistBox" class="info-box info-box-4"></div>
+    <div id="downHistBox" class="info-box info-box-4">
+        <p id="loading">Loading...</p>
+    </div>
 </div>
 <div class="settings-item">
     <h2>Biggest Channels</h2>
diff --git a/tubearchivist/static/stats.js b/tubearchivist/static/stats.js
index 03e89b5..ca548d8 100644
--- a/tubearchivist/static/stats.js
+++ b/tubearchivist/static/stats.js
@@ -8,6 +8,7 @@ function primaryStats() {
   let apiEndpoint = '/api/stats/primary/';
   let responseData = apiRequest(apiEndpoint, 'GET');
   let primaryBox = document.getElementById('primaryBox');
+  clearLoading(primaryBox);
   let videoTile = buildVideoTile(responseData);
   primaryBox.appendChild(videoTile);
   let channelTile = buildChannelTile(responseData);
@@ -18,6 +19,10 @@ function primaryStats() {
   primaryBox.appendChild(downloadTile);
 }
 
+function clearLoading(dashBox) {
+  dashBox.querySelector('#loading').remove();
+}
+
 function buildTile(titleText) {
   let tile = document.createElement('div');
   tile.classList.add('info-box-item');
@@ -74,6 +79,7 @@ function watchStats() {
   let apiEndpoint = '/api/stats/watch/';
   let responseData = apiRequest(apiEndpoint, 'GET');
   let watchBox = document.getElementById('watchBox');
+  clearLoading(watchBox);
 
   for (const property in responseData) {
     let tile = buildWatchTile(property, responseData[property]);
@@ -100,6 +106,7 @@ function downloadHist() {
   let apiEndpoint = '/api/stats/downloadhist/';
   let responseData = apiRequest(apiEndpoint, 'GET');
   let histBox = document.getElementById('downHistBox');
+  clearLoading(histBox);
   if (responseData.length === 0) {
     let tile = buildTile('No recent downloads');
     histBox.appendChild(tile);
@@ -148,11 +155,16 @@ function humanFileSize(size) {
   return (size / Math.pow(1024, i)).toFixed(1) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
 }
 
-function buildStats() {
+async function buildStats() {
   primaryStats();
   watchStats();
   downloadHist();
   biggestChannel();
 }
 
-buildStats();
+document.addEventListener('DOMContentLoaded', () => {
+  console.log('DOM content loaded');
+  window.requestAnimationFrame(() => {
+    buildStats();
+  });
+});