loader

components/GenerationFilter.vue

@@ -1,33 +1,34 @@
 <template>
-  <v-select
-    :items="generations"
+  <v-btn-toggle
     v-model="internalSelected"
-    label="Filtrer par génération"
-    multiple
-  />
+    mandatory
+    class="mb-4"
+  >
+    <v-btn :value="0">Tout</v-btn>
+    <v-btn v-for="gen in generations" :key="gen" :value="gen">
+      Génération {{ gen }}
+    </v-btn>
+  </v-btn-toggle>
 </template>
 
 <script>
 export default {
   props: {
     selected: {
-      type: Array,
-      default: () => []
+      type: [Number],
+      default: 0
     }
   },
   data() {
     return {
       generations: [1,2,3,4,5,6,7,8,9],
-      internalSelected: []
+      internalSelected: this.selected
     }
   },
-  created() {
-    this.internalSelected = this.selected.length ? [...this.selected] : [...this.generations]
-  },
   watch: {
     selected(newVal) {
-      if (JSON.stringify(newVal) !== JSON.stringify(this.internalSelected)) {
-        this.internalSelected = [...newVal]
+      if(newVal !== this.internalSelected) {
+        this.internalSelected = newVal
       }
     },
     internalSelected(newVal) {

components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-app-bar color="deep-purple accent-4" dark>
+  <v-app-bar app color="deep-purple accent-4" dark>
     <v-toolbar-title @click="$router.push('/')" class="text-white">Mon pokédex</v-toolbar-title>
   </v-app-bar>
 </template>

pages/index.vue

@@ -1,12 +1,18 @@
 <template>
   <div class="p-4">
     <GenerationFilter :selected="selectedGen" @change="onGenChange" />
+
     <v-container>
       <v-row>
+        <v-col cols="12" class="text-center" v-if="loading">
+          <v-progress-circular indeterminate color="primary" size="48" />
+        </v-col>
+
         <PokemonCard
           v-for="poke in pokemons"
           :key="poke.pokedex_id"
           :pokemon="poke"
+          v-if="!loading"
         />
       </v-row>
     </v-container>
@@ -22,8 +28,9 @@ export default {
   components: { PokemonCard, GenerationFilter },
   data() {
     return {
-      selectedGen: [1, 2, 3, 4, 5, 6, 7, 8, 9],
+      selectedGen: 0,
       pokemons: [],
+      loading: false,
     }
   },
   async mounted() {
@@ -31,18 +38,26 @@ export default {
   },
   methods: {
     async loadPokemons() {
+      this.loading = true
       try {
         const res = await axios.get('https://tyradex.vercel.app/api/v1/pokemon')
         const all = res.data
-        this.pokemons = all.filter(p => this.selectedGen.includes(p.generation))
+        if (this.selectedGen === 0) {
+          this.pokemons = all
+        } else {
+          this.pokemons = all.filter(p => p.generation === this.selectedGen)
+        }
       } catch (error) {
         console.error('Erreur lors du chargement des pokémons :', error)
+        this.pokemons = []
+      } finally {
+        this.loading = false
       }
     },
     async onGenChange(gen) {
-      this.selectedGen = Array.isArray(gen) ? gen : [gen]
+      this.selectedGen = gen
       await this.loadPokemons()
-    },
+    }
   }
 }
 </script>