Add loading screen for index

public/scripts/index.js

@@ -1,6 +1,7 @@
 import * as Data from "./data.js";
 import * as Form from "./form.js";
 
+const dropdownsDiv = document.getElementById('dropdowns-div');
 const sportDropdown = document.getElementById('sport-dropdown');
 const seasonDropdown = document.getElementById('year-dropdown');
 const genderDropdown = document.getElementById('gender-dropdown');
@@ -11,6 +12,7 @@ const gamesTableHeader = document.getElementById('games-table-header');
 const noScoresMessage = document.getElementById('no-scores-message');
 const addScoreButton = document.getElementById('add-score-button');
 const manageButton = document.getElementById('manage-button');
+const loadingSpan = document.getElementById('loading');
 
 
 
@@ -42,6 +44,9 @@ async function initializeForm() {
     divisionDropdown.onchange = loadTable;
     teamDropdown.onchange = loadTable;
 
+    loadingSpan.textContent = '';
+    dropdownsDiv.style.visibility = 'visible';
+
     loadTable();
 
 

public/stylesheets/index.css

@@ -32,3 +32,7 @@ tr {
 #login-button {
     margin-left: auto;
 }
+
+#dropdowns-div {
+    visibility: hidden;
+}

views/index.pug

@@ -11,7 +11,8 @@ block actions
 
 
 block content
-    div
+    span#loading Loading...
+    div#dropdowns-div
         span(class='form-section')
             label Year
             span(class='form-section-input')