big ui refractor

client/src/views/Lesson.vue

@@ -1,9 +1,11 @@
 <template lang="pug">
-  v-container.page-container-center
+  v-container.page-container-center.fill-height
+    .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.lesson-card(
-      v-if="currentItem"
-      elevation="0"
+      v-else-if="currentItem"
     )
       .d-flex.align-center.pa-4.border-b-subtle
         v-btn(icon="mdi-close" variant="text" to="/dashboard" color="grey")
@@ -82,7 +84,7 @@
         ) {{ $t('lesson.ready') }}
         .d-flex.justify-center.gap-4.mt-2(v-if="phase === 'drawing' && subPhase === 'practice'")
           v-btn(
-           variant="text" color="amber" @click="canvas?.showHint()"
+           variant="text" color="amber" @click="useHint"
           ) {{ $t('lesson.hintAction') }}
           v-btn(variant="text" color="grey" @click="phase='demo'") {{ $t('lesson.watchAgain') }}
 
@@ -122,6 +124,7 @@ const practiceCount = ref(0);
 const sessionDone = ref(0);
 const sessionTotal = ref(0);
 const canvasOpacity = ref(1);
+const loading = ref(true);
 
 const canvas = ref(null);
 const demoViewer = ref(null);
@@ -163,6 +166,7 @@ async function handleDrawComplete() {
     await new Promise((r) => { setTimeout(r, 300); });
 
     subPhase.value = 'practice';
+    await nextTick();
     canvas.value?.reset();
 
     canvasOpacity.value = 1;
@@ -186,9 +190,25 @@ async function handleDrawComplete() {
 function handleMistake() {
   if (subPhase.value === 'practice') practiceCount.value = 0;
 }
+
+function useHint() {
+  canvas.value?.showHint();
+  if (subPhase.value === 'practice') {
+    practiceCount.value = 0;
+  }
+}
+
 onMounted(async () => {
+  loading.value = true;
   await store.fetchLessonQueue();
   sessionTotal.value = store.lessonQueue.length;
   loadNext();
+  loading.value = false;
 });
 </script>
+
+<style lang="scss" scoped>
+.page-container-center {
+  min-height: 100%;
+}
+</style>