safavimohadeseh78andCursor
a5e458ed25
Add layout shells, desktop views, module-level page caches, and UI fixes for auth, home, wallet, transactions, address, and related pages. Co-authored-by: Cursor <cursoragent@cursor.com>
55 lines
2.8 KiB
Vue
55 lines
2.8 KiB
Vue
<template>
|
|
<div ref="skeletonRatio" class="h-fit w-full min-h-[620px]">
|
|
<content-loader
|
|
:width="skeletonWidth"
|
|
class="bg-white"
|
|
:height="skeletonHeight"
|
|
>
|
|
<rect :width="skeletonWidth" height="5" rx="3" ry="3" x="0" y="0" />
|
|
<rect :width="skeletonWidth" height="5" rx="3" ry="3" x="0" y="84" />
|
|
<rect width="5" height="85" rx="3" ry="3" x="0" y="0" />
|
|
<rect width="5" :x="skeletonWidth - 5" height="85" rx="3" ry="3" y="0" />
|
|
<rect width="2" :x="skeletonWidth / 2" height="60" rx="3" ry="3" y="15" />
|
|
<rect :width="halfWidth(20)" x="10" height="20" rx="10" ry="10" y="15" />
|
|
<rect :width="halfWidth(20)" :x="skeletonWidth / 2 + 10" height="20" rx="10" ry="10" y="15" />
|
|
<rect :width="halfWidth(40)" x="20" height="10" rx="5" ry="5" y="40" />
|
|
<rect :width="halfWidth(40)" :x="skeletonWidth / 2 + 20" height="10" rx="5" ry="5" y="40" />
|
|
<rect :width="halfWidth(30)" x="15" height="18" rx="10" ry="10" y="60" />
|
|
<rect :width="halfWidth(30)" :x="skeletonWidth / 2 + 15" height="18" rx="10" ry="10" y="60" />
|
|
<circle :cx="skeletonWidth / 4 - skeletonWidth / 8" cy="145" r="20" />
|
|
<circle :cx="skeletonWidth / 4 + skeletonWidth / 8" cy="145" r="20" />
|
|
<circle :cx="skeletonWidth / 2 + skeletonWidth / 8" cy="145" r="20" />
|
|
<circle :cx="skeletonWidth - skeletonWidth / 8" cy="145" r="20" />
|
|
<rect width="50" :x="skeletonWidth / 4 - skeletonWidth / 8 - 25" height="15" rx="3" ry="3" y="170" />
|
|
<rect width="50" :x="skeletonWidth / 4 + skeletonWidth / 8 - 25" height="15" rx="3" ry="3" y="170" />
|
|
<rect width="50" :x="skeletonWidth / 2 + skeletonWidth / 8 - 25" height="15" rx="3" ry="3" y="170" />
|
|
<rect width="50" :x="skeletonWidth - skeletonWidth / 8 - 25" height="15" rx="3" ry="3" y="170" />
|
|
<rect :width="fullWidth(45)" x="45" height="20" rx="3" ry="3" y="230" />
|
|
<rect :width="skeletonWidth" x="0" height="80" rx="3" ry="3" y="260" />
|
|
<rect :width="halfWidth(10)" x="0" height="50" rx="3" ry="3" y="360" />
|
|
<rect :width="halfWidth(10)" :x="skeletonWidth / 2 + 5" height="50" rx="3" ry="3" y="360" />
|
|
<rect :width="skeletonWidth" x="0" height="170" rx="3" ry="3" y="440" />
|
|
</content-loader>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { computed, ref } from 'vue'
|
|
import { useElementSize } from '@vueuse/core'
|
|
import { ContentLoader } from 'vue-content-loader'
|
|
|
|
const skeletonHeight = 620
|
|
const skeletonRatio = ref<HTMLElement | null>(null)
|
|
const { width } = useElementSize(skeletonRatio, { width: 0, height: 0 }, { box: 'border-box' })
|
|
|
|
const skeletonWidth = computed(() => Math.max(width.value, 320))
|
|
|
|
function halfWidth(padding: number) {
|
|
return Math.max(skeletonWidth.value / 2 - padding, 0)
|
|
}
|
|
|
|
function fullWidth(padding: number) {
|
|
return Math.max(skeletonWidth.value - padding, 0)
|
|
}
|
|
</script>
|