diff --git a/src/components/Projects.vue b/src/components/Projects.vue index fae7810..259164b 100644 --- a/src/components/Projects.vue +++ b/src/components/Projects.vue @@ -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"); diff --git a/src/stores/projects.js b/src/stores/projects.js index e8350f5..b5ee7ed 100644 --- a/src/stores/projects.js +++ b/src/stores/projects.js @@ -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); });