try to fix examstore value change between pages, improve & add loading screen

components/AdvancedQuestionBlock.vue

@@ -75,9 +75,11 @@ const abc_model = defineModel();
 <style scoped>
 label {
   @apply cursor-pointer flex flex-row gap-2 items-center;
+  &:hover {
+    @apply bg-slate-200;
+  }
 }
-
-label:hover {
-  @apply bg-slate-200;
+span {
+  @apply text-lg;
 }
 </style>

pages/exam.vue

@@ -101,6 +101,11 @@ async function next() {
     }
     if (countAdvanced.value + 1 < dataAdvanced.value?.length!) {
       countAdvanced.value++;
+      useHead({
+        title: `Pytanie ${countAdvanced.value + 1}/${
+          dataAdvanced.value?.length
+        }`,
+      });
     }
     if (countAdvanced.value == dataAdvanced.value?.length! - 1) {
       ending.value = true;
@@ -110,12 +115,13 @@ async function next() {
 }
 
 function endExam() {
+  loading.value = true;
   while (!ending.value) {
     next();
   }
   next();
-  examStore.result = result.value;
-  examStore.end = true;
+  examStore.setResult(result.value);
+  examStore.setEnd(true);
   return navigateTo("/result", { replace: true });
 }
 
@@ -149,10 +155,12 @@ const result: Ref<ResultEndType> = ref({
   basic: [],
   advanced: [],
 });
+const loading = ref(false);
 </script>
 
 <template>
   <div>
+    <Loading v-if="loading" />
     <div v-if="statusBasic === 'success' && statusAdvanced === 'success'">
       <div class="grid grid-cols-4 min-h-dvh">
         <div class="col-span-3 flex flex-col gap-4">

pages/index.vue

@@ -14,30 +14,36 @@ const categories = [
   "PT",
 ];
 
+const loading = ref(false);
+
 const examStore = useExamStore();
 
 function setAndGo(category: string) {
-  examStore.category = category;
+  loading.value = true;
+  examStore.setCategory(category);
   return navigateTo("/exam");
 }
 </script>
 
 <template>
-  <div class="text-3xl">
-    <span>Test na prawo jazdy</span>
-    <p>
-      Witaj w teście na prawo jazdy, aby rozpocząć, naciśnij jeden z poniższych
-      przycisków:
-      <br />
-    </p>
-    <div class="flex flex-row flex-wrap gap-2">
-      <button
-        class="btn btn-xl btn-secondary"
-        v-for="category in categories"
-        @click="setAndGo(category)"
-      >
-        {{ category }}
-      </button>
+  <div>
+    <div v-if="!loading" class="text-3xl">
+      <span>Test na prawo jazdy</span>
+      <p>
+        Witaj w teście na prawo jazdy, aby rozpocząć, naciśnij jeden z
+        poniższych przycisków:
+        <br />
+      </p>
+      <div class="flex flex-row flex-wrap gap-2">
+        <button
+          class="btn btn-xl btn-secondary"
+          v-for="category in categories"
+          @click="setAndGo(category)"
+        >
+          {{ category }}
+        </button>
+      </div>
     </div>
+    <Loading v-else />
   </div>
 </template>

store/examStore.ts

@@ -18,12 +18,26 @@ export const useExamStore = defineStore("exam-store", () => {
       advanced: [],
     };
   }
-
+  function setEnd(value: boolean) {
+    end.value = value;
+    return end.value;
+  }
+  function setCategory(value: string) {
+    category.value = value;
+    return category.value;
+  }
+  function setResult(value: ResultEndType) {
+    result.value = value;
+    return result.value;
+  }
   return {
     category,
     end,
     result,
     resetExam,
     mildReset,
+    setEnd,
+    setCategory,
+    setResult,
   };
 });