LLM button disabling, and lesson 24 some grammar

docs/.vitepress/theme/components/VocabQuiz.vue

@@ -69,7 +69,7 @@
         <div v-if="example">
           <button
             type="button"
-            :disabled="!!exNotesLoading"
+            :disabled="exCurrentKo !== example.ko || !!exNotesLoading"
             @click="
               if (exNotes) {
                 exNotes = '';
@@ -77,7 +77,10 @@
               explainSentence(example.ko);
             "
           >
-            <span v-if="!!exNotesLoading"> {{ exNotesLoading }} </span>
+            <span v-if="exCurrentKo !== example.ko">
+              {{ exNotesLoading || "..." }}
+            </span>
+            <span v-else-if="!!exNotesLoading"> {{ exNotesLoading }} </span>
             <span v-else-if="!exNotes"> Explain Sentence </span>
             <span v-else> New explanation </span>
           </button>
@@ -159,6 +162,7 @@ const exIndex = ref(0);
 const isEdit = ref(false);
 const vEditContent = ref("");
 
+const exCurrentKo = ref("");
 const exNotes = ref("");
 const exNotesLoading = ref("");
 
@@ -217,13 +221,20 @@ watch(example, () => {
   timeoutSetExNotes = window.setTimeout(() => {
     timeoutSetExNotes = 0;
 
-    exNotes.value = "";
+    if (!exNotesLoading.value) {
+      exNotes.value = "";
+    }
+
     if (!example.value) return;
 
-    if (supabase) {
-      let { ko } = example.value;
-      ko = ko.replaceAll("**", "");
+    let { ko } = example.value;
+    ko = ko.replaceAll("**", "");
 
+    if (!exNotesLoading.value) {
+      exCurrentKo.value = example.value.ko;
+    }
+
+    if (supabase) {
       supabase
         .from("sentence-explain")
         .select<any, { explain: string }>("explain")