Fix loading spinner to not spin the text as well

Author: nickygerritsen

webapp/public/js/domjudge.js

@@ -1291,7 +1291,7 @@ function loadSubmissions(dataElement, $displayElement) {
                     $item.find('[data-verdict]').html(submission.verdict);
                     $submissionList.append($item);
                 }
-                $displayElement.find('.spinner-border').remove();
+                $displayElement.find('.submissions-loading').remove();
                 $displayElement.append($table);
             }
         });

webapp/public/style_domjudge.css

@@ -758,3 +758,9 @@ blockquote {
     height: 80vh;
     border: 1px solid grey;
 }
+
+.submissions-loading {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}

webapp/templates/public/team_submissions.html.twig

@@ -13,7 +13,8 @@
         data-team-id="{{ team.externalid }}"
         data-problem-id="{{ problem.externalId }}"
         data-submissions-url="{{ path('public_submissions_data_cell', {teamId: team.externalid, problemId: problem.externalId}) }}">
-        <div class="spinner-border" role="status">
+        <div class="submissions-loading">
+            <div class="spinner-border" role="status"></div>
             <span class="sr-only">Loading...</span>
         </div>
         {% include 'public/partials/submission_list_template.html.twig' %}

webapp/templates/public/team_submissions_modal.html.twig

@@ -9,7 +9,8 @@
 {% endblock %}
 
 {% block content %}
-    <div class="spinner-border" role="status">
+    <div class="submissions-loading">
+        <div class="spinner-border" role="status"></div>
         <span class="sr-only">Loading...</span>
     </div>
 {% endblock %}