mirror of
https://github.com/web3privacy/explorer-app.git
synced 2024-10-15 16:46:26 +02:00
feat: skeletors
This commit is contained in:
parent
2cf38c5406
commit
7ca345dd0e
2 changed files with 101 additions and 1 deletions
96
components/CardSkeletor.vue
Normal file
96
components/CardSkeletor.vue
Normal 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>
|
|
@ -63,8 +63,12 @@ const shownProjects = computed(() => props.group.projects.slice(0, shownProjects
|
|||
:key="project.id"
|
||||
:project="project"
|
||||
/>
|
||||
|
||||
<template #fallback>
|
||||
Loading...
|
||||
<CardSkeletor
|
||||
v-for="i in 6"
|
||||
:key="i"
|
||||
/>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
|
Loading…
Reference in a new issue