Statistics only renders when data is loaded

frontend/src/components/CorrectionStatistics.vue

@@ -3,21 +3,23 @@
       <v-card-title>
         <span class="title">Statistics</span>
       </v-card-title>
-      <ul class="inline-list mx-3">
-        <li>Submissions per student: <span>{{statistics.submissions_per_student}}</span></li>
-        <li>Submissions per type: <span>{{statistics.submissions_per_type}}</span></li>
-        <li>Curr. mean score: <span>{{statistics.current_mean_score.toFixed(2)}}</span></li>
-      </ul>
-      <v-divider class="mx-2 my-2"></v-divider>
-      <div v-for="(progress, index) in statistics.submission_type_progress" :key="index">
-        <v-card-title class="py-0">
-          {{progress.name}}
-        </v-card-title>
-        <div class="mx-3">
-          <v-progress-linear
-            v-model="progress.percentage"
-            :color="progress.percentage === 100 ? 'green' : 'blue'"
-          />
+      <div v-if="loaded">
+        <ul class="inline-list mx-3">
+          <li>Submissions per student: <span>{{statistics.submissions_per_student}}</span></li>
+          <li>Submissions per type: <span>{{statistics.submissions_per_type}}</span></li>
+          <li>Curr. mean score: <span>{{statistics.current_mean_score.toFixed(2)}}</span></li>
+        </ul>
+        <v-divider class="mx-2 my-2"></v-divider>
+        <div v-for="(progress, index) in statistics.submission_type_progress" :key="index">
+          <v-card-title class="py-0">
+            {{progress.name}}
+          </v-card-title>
+          <div class="mx-3">
+            <v-progress-linear
+              v-model="progress.percentage"
+              :color="progress.percentage === 100 ? 'green' : 'blue'"
+            />
+          </div>
         </div>
       </div>
     </v-card>