diff --git a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue index 7d13ae630116e2f9a34ba5d8e8755b2b8710635c..b4638340dc332fda170694862e254bf3890512c6 100644 --- a/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue +++ b/aleksis/apps/alsijil/frontend/components/coursebook/statistics/StatisticsForPersonCard.vue @@ -1,6 +1,9 @@ <template> <v-card> - <v-card-title v-if="compact"> + <v-skeleton-loader v-if="$apollo.loading" + type="card-heading" + /> + <v-card-title v-else-if="compact"> {{ $t("alsijil.coursebook.statistics.person_compact.title") }} <v-spacer /> <!-- TODO: Maximize button --> @@ -8,19 +11,30 @@ <v-card-title v-else> {{ $t("alsijil.coursebook.statistics.person_page.title") }} </v-card-title> - <statistics-absences-card + + <v-skeleton-loader v-if="$apollo.loading" + type="card" + /> + <statistics-absences-card v-else :absence-reasons="statistics.absenceReasons" /> - <statistics-tardiness-card + <v-skeleton-loader v-if="$apollo.loading" + type="card" + /> + <statistics-tardiness-card v-else :tardiness-sum="statistics.tardinessSum" :tardiness-count="statistics.tardinessCount" /> - <statistics-extra-marks-card + <v-skeleton-loader v-if="$apollo.loading" + type="card" + /> + <statistics-extra-marks-card v-else :extra-marks="statistics.extraMarks" /> - <statistics-personal-notes-list - v-if="compact" + <v-skeleton-loader v-if="compact && $apollo.loading" + type="card" /> + <statistics-personal-notes-list v-else-if="compact" /> </v-card> </template>