A: screen loader

N1c0Dev · Dec 12, 2024 · 5e008a7 · 5e008a7
1 parent e269b8e
commit 5e008a7
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 70 deletions.
diff --git a/src/components/screenLoader.vue b/src/components/screenLoader.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  }
+})
+</script>
+
+<template>
+  <section v-if="show">
+    <div
+      class="
+        bg-slate-300/90
+        fixed
+        -translate-x-2/4
+        -translate-y-2/4
+        max-w-full
+        z-10
+        left-2/4
+        top-2/4
+        h-screen
+        w-full
+        flex
+      "
+    >
+      <img
+        class="
+          m-auto
+          w-1/2
+          animate-[spin_2s_linear_infinite]
+          md:w-[20vw]
+        "
+        src="@/assets/icons/pokeball.svg"
+        alt="loader"
+      >
+    </div>
+  </section>
+</template>
diff --git a/src/stores/main.ts b/src/stores/main.ts
@@ -4,18 +4,30 @@ import { defineStore } from 'pinia'
 export const useMainStore = defineStore('main', () => {
   const paginationLoader = ref(false)
   const homePokemonListNotFound = ref(false)
+  const pokemonListLoader = ref(false)
+  const pokemonDetailsLoader = ref(false)
 
   function setPaginationLoader(newValue: boolean) {
     paginationLoader.value = newValue
   }
   function setHomePokemonListNotFound(newValue: boolean) {
     homePokemonListNotFound.value = newValue
   }
+  function setPokemonListLoader(newValue: boolean) {
+    pokemonListLoader.value = newValue
+  }
+  function setPokemonDetailsLoader(newValue: boolean) {
+    pokemonDetailsLoader.value = newValue
+  }
 
   return {
     paginationLoader,
     homePokemonListNotFound,
+    pokemonListLoader,
+    pokemonDetailsLoader,
     setPaginationLoader,
     setHomePokemonListNotFound,
+    setPokemonListLoader,
+    setPokemonDetailsLoader,
   }
 })
diff --git a/src/stores/pokemon.ts b/src/stores/pokemon.ts
@@ -57,17 +57,25 @@ export const usePokemonStore = defineStore('pokemon', () => {
   const mainStore = useMainStore()
 
   function getPokemonList(type: string) {
+    mainStore.setPokemonListLoader(pokemonList.value.pokemon_entries[0].entry_number == 0)
+
     pokeApi.pokedex.get(type).then((response: any) => {
+      setTimeout(() => mainStore.setPokemonListLoader(false), 800)
       pokemonList.value = response.data
     }).catch((err: any) => {
+      mainStore.setPokemonListLoader(false)
       mainStore.setHomePokemonListNotFound(true)
       console.error(err)
     })
   }
   function getPokemon(name: string | string[]) {
+    mainStore.setPokemonDetailsLoader(true)
+
     pokeApi.pokemon.one(name).then((response: any) => {
+      setTimeout(() => mainStore.setPokemonDetailsLoader(false), 1000)
       pokemonDetail.value = response.data
     }).catch((err: any) => {
+      mainStore.setPokemonDetailsLoader(false)
       console.error(err)
     })
   }

diff --git a/src/views/pages/Team/TeamDeatilsView.vue b/src/views/pages/Team/TeamDeatilsView.vue
@@ -2,15 +2,18 @@
 import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
+import { useMainStore } from '@/stores/main.ts'
 import { usePokemonStore } from '@/stores/pokemon.ts'
 
 import PokemonDetailsCard from '@/components/PokemonDetailsCard.vue'
 import NavBar from '@/components/NavBar.vue'
+import ScreenLoader from '@/components/screenLoader.vue'
 
 const route = useRoute()
 
 const pokemonIsValid = ref(false)
 
+const mainStore = useMainStore()
 const pokemonStore = usePokemonStore()
 
 function checkPokemon(){
@@ -33,6 +36,7 @@ if (pokemonIsValid.value) {
       activePage="team"
       :pokemon-count="pokemonStore.myPokemonTeam.length"
     />
+    <ScreenLoader :show="mainStore.pokemonDetailsLoader" />
     <div
       v-if="pokemonIsValid"
       class="

diff --git a/src/views/pages/home/HomeView.vue b/src/views/pages/home/HomeView.vue
@@ -1,93 +1,95 @@
 <script setup lang="ts">
-  import { ref, watch } from 'vue'
-  import { useIntersectionObserver } from '@vueuse/core'
+import { ref, watch } from 'vue'
+import { useIntersectionObserver } from '@vueuse/core'
 
-  import { useMainStore } from '@/stores/main.ts'
-  import { usePokemonStore } from '@/stores/pokemon.ts'
+import { useMainStore } from '@/stores/main.ts'
+import { usePokemonStore } from '@/stores/pokemon.ts'
 
-  import SimpleCard from '@/components/SimpleCard.vue'
-  import NavBar from '@/components/NavBar.vue'
-  import InfoPage from '@/components/infoPage.vue'
+import SimpleCard from '@/components/SimpleCard.vue'
+import NavBar from '@/components/NavBar.vue'
+import InfoPage from '@/components/infoPage.vue'
+import ScreenLoader from '@/components/screenLoader.vue'
 
-  const mainStore = useMainStore()
-  const pokemonStore = usePokemonStore()
+const mainStore = useMainStore()
+const pokemonStore = usePokemonStore()
 
-  const endPageTarget = ref(null)
-  const endPageTargettIsVisibleIsVisible = ref(false)
+const endPageTarget = ref(null)
+const endPageTargettIsVisibleIsVisible = ref(false)
 
-  const currentCardGroup = ref(0)
-  const endPageVisibility = ref(true)
+const currentCardGroup = ref(0)
+const endPageVisibility = ref(true)
 
-  watch(endPageTargettIsVisibleIsVisible, ()=> {
-    if(endPageTargettIsVisibleIsVisible.value) {
-      mainStore.setPaginationLoader(true)
-      endPageVisibility.value = false
-      setTimeout(() => revealSection(currentCardGroup.value), 500)
-      currentCardGroup.value ++
-    }
-  })
-
-  const pokemonSpriteBaseUrl = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/'
-
-  function setGroup(index: number) {
-    const groupValidation = [
-      index <= 25,
-      index > 25 && index <= 50,
-      index > 50 && index <= 75,
-      index > 75 && index <= 100,
-      index > 100 && index <= 125,
-      index > 125 && index <= 150,
-      index > 150,
-    ]
-    return `${groupValidation.indexOf(true)}`
-  }
-  function setRef(index: number) {
-    const refValidation = [
-      index == 25,
-      index == 50,
-      index == 75,
-      index == 100,
-      index == 125,
-      index == 150,
-      index == 150,
-    ]
-    return `${refValidation.indexOf(true) + 1}`
+watch(endPageTargettIsVisibleIsVisible, ()=> {
+  if(endPageTargettIsVisibleIsVisible.value) {
+    mainStore.setPaginationLoader(true)
+    endPageVisibility.value = false
+    setTimeout(() => revealSection(currentCardGroup.value), 500)
+    currentCardGroup.value ++
   }
-  function setInitPagination() {
-    for(let index = 0; index < 7; index++) {
-      const groupArray = document.getElementsByName(`group-${index}`)
+})
 
-      groupArray.forEach(
-        (item) => index > 0 ? item.classList.add('hidden') : item.classList.remove('hidden')
-      )
-    }
-  }
-  function revealSection(index: number) {
+const pokemonSpriteBaseUrl = 'https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/'
+
+function setGroup(index: number) {
+  const groupValidation = [
+    index <= 25,
+    index > 25 && index <= 50,
+    index > 50 && index <= 75,
+    index > 75 && index <= 100,
+    index > 100 && index <= 125,
+    index > 125 && index <= 150,
+    index > 150,
+  ]
+  return `${groupValidation.indexOf(true)}`
+}
+function setRef(index: number) {
+  const refValidation = [
+    index == 25,
+    index == 50,
+    index == 75,
+    index == 100,
+    index == 125,
+    index == 150,
+    index == 150,
+  ]
+  return `${refValidation.indexOf(true) + 1}`
+}
+function setInitPagination() {
+  for(let index = 0; index < 7; index++) {
     const groupArray = document.getElementsByName(`group-${index}`)
 
-    groupArray.forEach((item) => {
-      item.classList.remove('hidden')
-      item.classList.add('show-card')
-    })
-    mainStore.setPaginationLoader(false)
-    endPageVisibility.value = true
+    groupArray.forEach(
+      (item) => index > 0 ? item.classList.add('hidden') : item.classList.remove('hidden')
+    )
   }
+}
+function revealSection(index: number) {
+  const groupArray = document.getElementsByName(`group-${index}`)
+
+  groupArray.forEach((item) => {
+    item.classList.remove('hidden')
+    item.classList.add('show-card')
+  })
+  mainStore.setPaginationLoader(false)
+  endPageVisibility.value = true
+}
 
-  pokemonStore.getPokemonList('kanto')
-  setTimeout(() => setInitPagination(), 100)
-  useIntersectionObserver(
-    endPageTarget,
-    ([entry], observerElement) => {
-      endPageTargettIsVisibleIsVisible.value = entry?.isIntersecting || false
-    },
-  )
+pokemonStore.getPokemonList('kanto')
+setTimeout(() => setInitPagination(), 500)
+useIntersectionObserver(
+  endPageTarget,
+  ([entry], observerElement) => {
+    endPageTargettIsVisibleIsVisible.value = entry?.isIntersecting || false
+  },
+)
 </script>
 
 <template>
   <NavBar
     activePage="home"
     :pokemon-count="pokemonStore.myPokemonTeam.length"
   />
+  <ScreenLoader :show="mainStore.pokemonListLoader" />
   <InfoPage v-if="mainStore.homePokemonListNotFound">
     <template v-slot:content>
       <img