feat: add page loader

Author: alexiscolin

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
+import { gsap } from 'gsap'
 
 import Header from '@/components/layout/Header.vue'
 import Footer from '@/components/layout/Footer.vue'
@@ -12,6 +13,7 @@ import { useFaucetDetail } from '@/stores/faucetDetail'
 const store = useFaucetDetail()
 
 const DOMTitle = ref<null | HTMLElement>(null)
+const DOMSiteloader = ref<null | HTMLElement>(null)
 
 onMounted(() => {
   if (DOMTitle.value) {
@@ -31,10 +33,13 @@ onMounted(() => {
     store.DOM.title = DOMTitle.value
     store.titleToggle()
   }
+
+  gsap.to(DOMSiteloader.value, { autoAlpha: 0, duration: 0.4 })
 })
 </script>
 
 <template>
+  <div ref="DOMSiteloader" class="fixed top-0 left-0 right-0 bottom-0 z-max bg-dark"></div>
   <main class="js-main flex flex-col justify-between min-h-screen">
     <Header />
     <section class="px-20 w-full grid grid-cols-12">

src/components/faucet/FaucetDetail.vue

@@ -78,7 +78,7 @@ const requestFaucet = async (address: string, amount: number) => {
   console.log(address)
   console.log(amount)
 
-  const res = await req()
+  const res = await req('success')
   store.status = res.code
 
   if (store.status === 'error') {