Ajout skeleton loader dans le composant MoviesList.

 <script setup lang="ts">
 <script setup lang="ts">
 import SearchBar from "~/components/SearchBar.vue";
 import SearchBar from "~/components/SearchBar.vue";
+import { ref } from "vue";
+
+const isInitialLoading = ref(true);
 </script>
 </script>
 
 
 <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>
   </section>
   </section>
 </template>
 </template>