Toggle navigation
Toggle navigation
This project
Loading...
Sign in
Bruno Predot
/
tmdb_test
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Authored by
Bruno Predot
2025-04-23 21:46:10 +0200
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
f78ac62bbe08d20943a7fb6bc5f78e915c7241cb
f78ac62b
1 parent
faa527a9
Ajout skeleton loader dans le composant MoviesList.
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
15 additions
and
0 deletions
components/MoviesList.vue
components/MoviesList.vue
View file @
f78ac62
<script setup lang="ts">
import SearchBar from "~/components/SearchBar.vue";
import { ref } from "vue";
const isInitialLoading = ref(true);
</script>
<template>
<section>
<h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1>
<!-- Barre de recherche -->
<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>
</template>
...
...
Please
register
or
login
to post a comment