studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

fix Projects skeleton

Browse source
This commit is contained in:
Timothée Goguely 2025-05-14 17:27:26 +02:00
parent 79ac095c5d
commit 73722aadc2
2 changed files with 4 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/components/Projects.vue
View file

@ -71,8 +71,7 @@ section {
--flow-space: var(--space-16);
min-height: calc(100vh - 8.5rem);
}
section:empty::after,
section.loading::after {
section:empty::after {
content: 'Aucun projet pour le moment';
position: absolute;
inset: 0;
@ -89,9 +88,6 @@ section.loading::after {
background-repeat: no-repeat;
background-size: var(--space-40);
}
section.loading::after {
content: 'Chargement des projets…';
}
/* Skeleton */
section.skeleton::before,
section.skeleton::after {
@ -99,14 +95,14 @@ section.skeleton::after {
display: block;
width: 100%;
height: 100%;
max-width: 100%;
max-width: unset;
margin: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='white' x='0' y='0' width='100%25' height='244' rx='20' ry='20' /%3E%3Crect fill='%23F2F2F2' x='32' y='34' width='72' height='72' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='40' width='240' height='26' rx='4' ry='4' /%3E%3Crect fill='%23F2F2F2' x='136' y='80' width='160' height='18' rx='4' ry='4' /%3E%3C/svg%3E%0A");
background-repeat: repeat-y;
background-size: 1080px 260px;
background-position-x: left;
mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
animation: skeleton 1s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
animation: skeleton 1s -.25s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}
section.skeleton::after {
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1080 260' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cmask id='tr'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='20' fill='black'/%3E%3C/mask%3E%3Cmask id='br'%3E%3Crect width='100%25' height='100%25' fill='white'/%3E%3Ccircle r='20' cx='1060' cy='224' fill='black'/%3E%3C/mask%3E%3C/defs%3E%3Crect fill='%23F2F2F2' x='1060' y='0' width='20' height='20' mask='url(%23tr)' /%3E%3Crect fill='%23F2F2F2' x='1060' y='224' width='20' height='20' mask='url(%23br)' /%3E%3C/svg%3E");

2
src/stores/projects.js
View file

@ -26,8 +26,8 @@ export const useProjectsStore = defineStore('projects', () => {
const api = useApiStore();
api.fetchData('projects').then((json) => {
isProjectsLoading.value = false;
// setTimeout(() => {
isProjectsLoading.value = false;
projects.value = json.page.children;
// }, 3000);
});