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