big ui refractor

client/src/views/Review.vue

@@ -1,8 +1,12 @@
 <template lang="pug">
-  v-container.fill-height.justify-center.pa-4
+  v-container.fill-height.justify-center.pa-4.review-view-container
     v-fade-transition(mode="out-in")
-      v-card.pa-6.rounded-xl.elevation-10.d-flex.flex-column.align-center.review-card(
-        v-if="currentItem"
+      .d-flex.flex-column.justify-center.align-center.fill-height(v-if="loading")
+        v-progress-circular(indeterminate color="primary" size="64")
+        .text-body-1.text-grey.mt-4 {{ $t('review.loading') }}
+
+      v-card.pa-6.rounded-xl.d-flex.flex-column.align-center.review-card(
+        v-else-if="currentItem"
       )
         .d-flex.align-center.w-100.mb-6
           v-btn.mr-2(
@@ -51,19 +55,10 @@
             color="amber-lighten-1"
             prepend-icon="mdi-lightbulb-outline"
             size="small"
-            :disabled="showNext || statusCode === 'hint'"
+            :disabled="showNext"
             @click="triggerHint"
           ) {{ $t('review.showHint') }}
 
-          v-btn.text-caption.font-weight-bold.opacity-80(
-            variant="text"
-            color="purple-lighten-2"
-            prepend-icon="mdi-school-outline"
-            size="small"
-            :disabled="showNext"
-            @click="redoLesson"
-          ) {{ $t('review.redoLesson') }}
-
         v-sheet.d-flex.align-center.justify-center(
           width="100%"
           height="48"
@@ -137,6 +132,7 @@ const statusCode = ref('draw');
 const showNext = ref(false);
 const isFailure = ref(false);
 const kanjiCanvasRef = ref(null);
+const loading = ref(true);
 
 const sessionTotal = ref(0);
 const sessionDone = ref(0);
@@ -166,6 +162,7 @@ function loadNext() {
 }
 
 onMounted(async () => {
+  loading.value = true;
   const mode = route.query.mode || 'shuffled';
   await store.fetchQueue(mode);
 
@@ -173,9 +170,11 @@ onMounted(async () => {
     sessionTotal.value = store.queue.length;
   }
   loadNext();
+  loading.value = false;
 });
 
 async function resetSession() {
+  loading.value = true;
   sessionDone.value = 0;
   sessionCorrect.value = 0;
   sessionTotal.value = 0;
@@ -184,6 +183,7 @@ async function resetSession() {
   await store.fetchQueue(mode);
   if (store.queue.length > 0) sessionTotal.value = store.queue.length;
   loadNext();
+  loading.value = false;
 }
 
 watch(() => store.batchSize, async () => {
@@ -253,3 +253,9 @@ const getStatusClass = (status) => {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+.review-view-container {
+  min-height: 100%;
+}
+</style>