diff --git a/static/javascript/plays.js b/static/javascript/plays.js
index 518bce9..db56ca7 100644
--- a/static/javascript/plays.js
+++ b/static/javascript/plays.js
@@ -52,8 +52,9 @@ async function loadPlays() {
         for (let column_number = 0; column_number < MAX_COLUMNS; column_number++) {
             const column_div = document.createElement('div')
             column_div.className = "col-sm-" + column_width
-
-            const play_card = createPlayCard(all_plays[(row_number * MAX_COLUMNS) + column_number])
+            
+            const current_play = all_plays[(row_number * MAX_COLUMNS) + column_number]
+            const play_card = createPlayCard(current_play)
 
             column_div.appendChild(play_card)
             row_div.appendChild(column_div)
@@ -61,5 +62,6 @@ async function loadPlays() {
         document.body.appendChild(row_div)
     }
 
+    document.getElementById('plays_loading_spinner').remove()
 
 }
\ No newline at end of file
diff --git a/templates/plays.jinja b/templates/plays.jinja
index 706e0a3..17dffe3 100644
--- a/templates/plays.jinja
+++ b/templates/plays.jinja
@@ -1,7 +1,7 @@
 {% extends "base.jinja" %}
 
 {% block body_block %}
-
+ <div id="plays_loading_spinner" class="spinner-border"></div>
 {% endblock body_block %}
 
 {% block extra_js_files %}