improvements

resources/js/Components/QuestionCard.vue

@@ -63,7 +63,7 @@ const updateTextValue = (event) => {
 
 <template>
     <div
-        class="py-5 first:pt-0 transition-all duration-200"
+        class="py-6 transition-all duration-200"
         :class="{ 'border-l-2 border-red-400/60 pl-4 -ml-4': error }"
     >
         <p class="text-white font-medium leading-relaxed mb-4">{{ question.text }}</p>

resources/js/Pages/Session/Show.vue

@@ -41,6 +41,7 @@ initializeAnswers()
 
 // Validation state
 const validationErrors = ref({})
+const processing = ref(false)
 const showErrors = ref(false)
 const questionRefs = ref({})
 
@@ -57,6 +58,8 @@ const saveAnswer = (questionId) => {
       preserveScroll: true,
       preserveState: true,
       only: ['answers'],
+      onStart: () => { processing.value = true },
+      onFinish: () => { processing.value = false },
     })
   }, 500)
 }
@@ -160,6 +163,9 @@ const completeSession = async () => {
   router.put(`/sessions/${props.session.id}`, {
     answers: { ...answerData },
     complete: true,
+  }, {
+    onStart: () => { processing.value = true },
+    onFinish: () => { processing.value = false },
   })
 }
 
@@ -254,7 +260,7 @@ const completeSession = async () => {
             </Transition>
 
             <div class="flex justify-end">
-                <AppButton size="lg" @click="completeSession" data-cy="complete-session">
+                <AppButton size="lg" :loading="processing" @click="completeSession" data-cy="complete-session">
                     Complete
                 </AppButton>
             </div>