chore: add loading quote

USNightOwl · Jun 26, 2024 · 27c744b · 27c744b
1 parent e981a64
commit 27c744b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/src/components/DoExercise/Quote.vue b/src/components/DoExercise/Quote.vue
@@ -1,19 +1,29 @@
 <template lang="">
-  <i class="block md:mb-8 mb-5 text-base md:text-xl md:px-8 px-2" v-html="quote">
+
+  <div v-if="isLoading" class="md:mb-8 mb-5">
+    <Icon icon="pi-spin pi-spinner" className="text-base md:text-xl text-[#67c23a]"/>
+  </div>
+  <i
+    v-else
+    class="block md:mb-8 mb-5 text-base md:text-xl md:px-8 px-2" v-html="quote">
   </i>
 </template>
 
 <script setup>
   import { ref, onMounted } from "vue";
+  import Icon from "@/components/Icon.vue";
   const quote = ref("");
+  const isLoading = ref(true);
 
   onMounted(async ()=> {
     const API_KEY = "SltTB9eBPK6on57H/Vlygg==1GGt23U1uXtMedKH";
+    isLoading.value = true;
     const response = await fetch("https://api.api-ninjas.com/v1/quotes?category=learning", {
       headers: {
         'x-api-key': API_KEY,
       }
     });
+    isLoading.value = false;
     const quoteData = await response.json();
     quote.value = `${quoteData[0].quote} - <b>${quoteData[0].author}</b>`;
   });

diff --git a/src/components/DoExercise/Results.vue b/src/components/DoExercise/Results.vue
@@ -7,7 +7,7 @@
     <h1 
       :class="'text-4xl font-bold my-6 ' + (isSubmitHaveNiceResult(props.results.score)?'text-green-500':'text-red-400')"
     >{{ props.results.score }}</h1>
-    <div class="flex md:flex-row flex-col gap-3 md:gap-5 flex-wrap md:my-10 my-5 justify-center items-center px-2">
+    <div class="flex md:flex-row flex-col gap-3 md:gap-5 flex-wrap md:my-10 my-8 justify-center items-center px-2">
       <ButtonUtils
         className="bg-[#f0f9eb] border-[#c2e7b0] hover:bg-[#67c23a] text-[#67c23a]"
         :func="handleTryAgain"