fix(提交列表): 转圈圈延迟 300ms 出现,快请求不再闪一下
Some checks failed
Deploy / deploy (push) Has been cancelled

翻页、切筛选大多一百毫秒内就回来了,转圈圈闪一下再切数据比直接切更晃眼。
给 loading 加一层延迟:只有真的慢到 300ms 以上才显示。

是**单向**延迟 —— 只推迟「显示」,请求一结束立刻收掉,不留尾巴(用
refDebounced 之类的双向去抖会在数据到了之后还多转 300ms)。

没有用 n-spin 的 delay:n-data-table 压根不走 n-spin,它渲染的是内部的
_internal/loading,直接由 loading 控制、没有 delay 参数。要用内置的就得把表格
包进 <n-spin :show :delay> 再去掉 :loading —— 那会换掉加载样式,还会丢掉
loading 时锁住排序/分页交互(DataTable 里那个 `disabled: this.loading`)。
这几行就是 n-spin 内部同样的写法,理由写在注释里了。

验证:headless chromium 走 CDP,只给 /api/submissions 加延迟(给全站加延迟的话
dev 模式几百个模块请求全被拖慢,页面根本起不来,第一次就是这么测出假结果的),
每 120ms 采一次 DOM:

    API 不加延迟   转圈圈全程没出现,表格直接 0 行 → 5 行
    API +800ms     表格 291ms 挂上 → 654ms 转圈圈出现(挂载后约 300ms)
                   → 1138ms 数据到位 → 1381ms 收掉

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-27 00:53:40 -06:00
parent 6ac458e6f3
commit 47a43b9880

View File

@@ -64,6 +64,31 @@ const todayCount = ref(0)
// 没有它的话,等接口这段时间表格就是一片空白,连转圈都没有 // 没有它的话,等接口这段时间表格就是一片空白,连转圈都没有
const loading = ref(false) const loading = ref(false)
/**
* 转圈圈延迟出现。翻页、切筛选大多在一百毫秒内就回来了,直接切数据比「闪一下
* 转圈再切」看着稳;只有真的慢到 300ms 以上才值得给个反馈。
*
* 注意是**单向**延迟:只推迟「显示」,一旦请求结束立刻收掉,不留尾巴。
*
* 为什么不用 n-spin 的 delayn-data-table 压根不走 n-spin它渲染的是内部的
* _internal/loading直接由 loading 控制、没有 delay 参数。要用内置的就得把表格
* 包进 <n-spin :show :delay> 再去掉 :loading —— 那会换掉加载样式,还会丢掉
* loading 时锁住排序/分页交互DataTable 里那个 `disabled: this.loading`)。
* 下面这几行就是 n-spin 内部同样的写法watchEffect + setTimeout + 清理)。
*/
const LOADING_DELAY = 300
const showLoading = ref(false)
let loadingTimer: ReturnType<typeof setTimeout> | undefined
watch(loading, (value) => {
clearTimeout(loadingTimer)
if (!value) {
showLoading.value = false
return
}
loadingTimer = setTimeout(() => (showLoading.value = true), LOADING_DELAY)
})
onUnmounted(() => clearTimeout(loadingTimer))
// 使用分页 composable // 使用分页 composable
const { query, clearQuery } = usePagination<SubmissionQuery>({ const { query, clearQuery } = usePagination<SubmissionQuery>({
username: useRouteQuery("username", "").value, username: useRouteQuery("username", "").value,
@@ -506,14 +531,14 @@ const flowchartColumns = computed(() => {
:bordered="false" :bordered="false"
:columns="flowchartColumns" :columns="flowchartColumns"
:data="flowcharts" :data="flowcharts"
:loading="loading" :loading="showLoading"
/> />
<n-data-table <n-data-table
v-else v-else
:bordered="false" :bordered="false"
:columns="columns" :columns="columns"
:data="submissions" :data="submissions"
:loading="loading" :loading="showLoading"
/> />
</n-flex> </n-flex>
<Pagination <Pagination