mirror of
https://gitee.com/dapppp/ruoyi-plus-vben5.git
synced 2026-04-10 19:23:15 +08:00
fix(workflow): 添加骨架屏延迟显示以避免快速请求导致的闪烁
使用 useTimeout 延迟 300ms 显示骨架屏,防止接口响应过快时骨架屏短暂闪烁,提升用户体验
This commit is contained in:
@@ -1,8 +1,9 @@
|
|||||||
<script setup lang="tsx">
|
<script setup lang="tsx">
|
||||||
import type { DescriptionsProps } from 'antdv-next';
|
import type { DescriptionsProps } from 'antdv-next';
|
||||||
|
|
||||||
import { computed, onBeforeUnmount } from 'vue';
|
import { computed, onBeforeUnmount, ref } from 'vue';
|
||||||
|
|
||||||
|
import { useTimeout } from '@vueuse/core';
|
||||||
import { useRequest } from 'alova/client';
|
import { useRequest } from 'alova/client';
|
||||||
import { Descriptions, Skeleton } from 'antdv-next';
|
import { Descriptions, Skeleton } from 'antdv-next';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
@@ -61,12 +62,20 @@ const items = computed<DescriptionsProps['items']>(() => {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 延时的骨架屏 防止接口请求过快 导致闪烁
|
||||||
|
const showSkeleton = ref(false);
|
||||||
|
useTimeout(300, {
|
||||||
|
callback: () => {
|
||||||
|
showSkeleton.value = true;
|
||||||
|
},
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="rounded-[6px] border p-2">
|
<div class="rounded-[6px] border p-2">
|
||||||
<Descriptions v-if="data" :column="1" :items="items" size="middle" />
|
<Descriptions v-if="data" :column="1" :items="items" size="middle" />
|
||||||
|
|
||||||
<Skeleton v-else active />
|
<Skeleton v-else-if="showSkeleton && !data" active />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user