From 27c744b8eb7965be88b41d0d112c66e5cd08f6e3 Mon Sep 17 00:00:00 2001
From: 21120447 <haonhat2729@gmail.com>
Date: Wed, 26 Jun 2024 17:19:24 +0700
Subject: [PATCH] chore: add loading quote

---
 src/components/DoExercise/Quote.vue   | 12 +++++++++++-
 src/components/DoExercise/Results.vue |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/DoExercise/Quote.vue b/src/components/DoExercise/Quote.vue
index f703d8f..9a64914 100644
--- 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
index 504a6ce..9eb5136 100644
--- 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"