diff --git a/tubearchivist/home/templates/home/settings.html b/tubearchivist/home/templates/home/settings.html
index 3d2bafdb..8d0c677c 100644
--- a/tubearchivist/home/templates/home/settings.html
+++ b/tubearchivist/home/templates/home/settings.html
@@ -6,15 +6,21 @@
Biggest Channels
diff --git a/tubearchivist/static/stats.js b/tubearchivist/static/stats.js
index 03e89b54..ca548d8d 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();
+ });
+});