web3privacy/explorer-app
1
0
Fork 0
mirror of https://github.com/web3privacy/explorer-app.git synced 2024-10-15 16:46:26 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat: skeletors

Browse source
This commit is contained in:
Diex5 2024-09-25 12:38:51 +02:00
parent 2cf38c5406
commit 7ca345dd0e
2 changed files with 101 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

96
components/CardSkeletor.vue Normal file
View file

@ -0,0 +1,96 @@
<template>
<div
flex
w-full
items-center
gap-16px
hover:bg="#121212"
transition-all
animate-pulse
>
<div
grid
grid-cols="2 lg:10"
w-full
gap-24px
items-center
>
<div
col-span="1 lg:2"
flex
items-center
gap="12px lg:16px"
relative
w-full
h-full
h="48px lg:64px"
>
<div class="bg-app-text-grey w-64px h-64px " />
<div
flex
flex-col
gap-y-4px
lg:flex-row
justify-center
>
<div
w-fit
flex
items-center
gap-8px
>
<div class="bg-app-text-grey w-100px h-10px " />
</div>
<div
class="bg-app-text-grey w-150px h-10px lg:hidden"
lg:animate-none
animate-pulse
/>
</div>
</div>
<div
lg:col-span-2
flex
items-center
justify-end
w-full
gap-16px
>
<div
class="bg-app-text-grey lg:w-full w-80px h-10px "
/>
</div>
<div
class="bg-app-text-grey w-full h-10px "
lg:block
hidden
/>
<div
class="bg-app-text-grey w-full h-10px "
lg:block
hidden
/>
<div
class="bg-app-text-grey w-full h-10px "
lg:block
hidden
/>
<div
class="bg-app-text-grey w-10px h-10px "
lg:block
hidden
/>
<div
class="bg-app-text-grey w-80px h-16px "
lg:block
hidden
/>
<div
class="bg-app-text-grey w-50px ml-auto h-32px "
lg:block
hidden
/>
</div>
</div>
</template>

6
components/Project/ProjectGridGroup.vue
View file

@ -63,8 +63,12 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
:key="project.id" :key="project.id"
:project="project" :project="project"
/> />
<template #fallback> <template #fallback>
Loading... <CardSkeletor
v-for="i in 6"
:key="i"
/>
</template> </template>
</ClientOnly> </ClientOnly>
</div> </div>