Création du composant SkeletonMoviesLoader et déplacement du skeleton existant d…

…ans le composant MoviesList..

@@ -4,3 +4,4 @@
 - Modification app.vue afin d'initialiser l'app avec vuetify et NuxtPage pour démarrer sur la page index.
 - Modification app.vue afin d'initialiser l'app avec vuetify et NuxtPage pour démarrer sur la page index.
 - Création du composant MoviesList.
 - Création du composant MoviesList.
 - Création du composant SearchBar.
 - Création du composant SearchBar.
+- Création du composant SkeletonMoviesLoader.

@@ -12,20 +12,10 @@ const isInitialLoading = ref(true);
 <template>
 <template>
   <section>
   <section>
     <h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1>
     <h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1>
-    
     <!-- Barre de recherche -->
     <!-- Barre de recherche -->
     <search-bar placeholder="Rechercher un film..."/>
     <search-bar placeholder="Rechercher un film..."/>
-    
-    <!-- Skeleton loader pendant le chargement initial -->
-    <div v-if="isInitialLoading" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-      <div v-for="i in 8" :key="i" class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse">
-        <div class="h-80 bg-gray-700"/>
-        <div class="p-4">
-          <div class="h-6 bg-gray-700 rounded mb-3"/>
-          <div class="h-4 bg-gray-700 rounded w-2/3"/>
-        </div>
-      </div>
-    </div>
+    <!-- Loading Skeleton -->
+    <skeleton-movies-loader :is-initial-loading="isInitialLoading" :skeleton-number="20" />
   </section>
   </section>
 </template>
 </template>
 
 

+<script setup lang="ts">
+//#region --Props--.
+defineProps({
+  isInitialLoading: {
+    type: Boolean,
+    required: true,
+    nullable: false,
+  },
+  skeletonNumber: {
+    type: Number,
+    required: false,
+    nullable: false,
+    default: 12
+  }
+});
+//#endregion
+
+</script>
+
+<template>
+  <!-- Skeleton loader pendant le chargement initial -->
+  <section v-if="isInitialLoading" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+    <div v-for="i in skeletonNumber" :key="i" class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse">
+      <div class="h-80 bg-gray-700"/>
+      <div class="p-4">
+        <div class="h-6 bg-gray-700 rounded mb-3"/>
+        <div class="h-4 bg-gray-700 rounded w-2/3"/>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+
+</style>