Bug Type: Component
Environment
- Vue Version:
3.3.4 - Element Plus Version:
2.3.5 - Browser / OS:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/110.0 - Build Tool:
Vite
Reproduction
Related Component
el-loading
Reproduction Link
Element Plus Playground
Steps to reproduce
Use v-loading on a div.
<script lang="ts">
const loading: Ref<boolean> = ref(true);
</script>
<template>
<div v-loading=loading>
<h2>
I should never be seen
</h2>
</div>
</template>What is Expected?
V-Loading should hide the content from the beginning when v-loading=true
What is actually happening?
V-Loading takes too long to show up, therefore a flash can be seen where the content to hide is visibile.
Additional comments
This makes setups like
<div
v-loading="loading"
>
<div
v-if="!data"
>
Error loading data
</div>
<div
v-else
>
{{ data }}
</div>
</div>not usable as Error loading data is flashed briefly in such a case.
loading-bug.mov
I should never be seen can be seen un-hidden briefly.
2条答案
按热度按时间ds97pgxw1#
How about specifying min-height ?
flashed can be reduced.
bf1o4zei2#
How about specifying min-height ?
flashed can be reduced.
Not really
https://element-plus.run/#eyJzcmMvQXBwLnZ1ZSI6IjxzY3JpcHQgc2V0dXAgbGFuZz1cInRzXCI+XG5pbXBvcnQgeyByZWYsIHZlcnNpb24gYXMgdnVlVmVyc2lvbiB9IGZyb20gJ3Z1ZSdcbmltcG9ydCB7IHZlcnNpb24gYXMgRXBWZXJzaW9uIH0gZnJvbSAnZWxlbWVudC1wbHVzJ1xuaW1wb3J0IHsgRWxlbWVudFBsdXMgfSBmcm9tICdAZWxlbWVudC1wbHVzL2ljb25zLXZ1ZSdcbmltcG9ydCB0eXBlIHsgVXBsb2FkVXNlckZpbGUgfSBmcm9tIFwiZWxlbWVudC1wbHVzXCI7XG4gIFxuY29uc3Qgc3VibWl0VXBsb2FkID0gKCkgPT4ge1xufVxuY29uc3QgZmlsZUxpc3Q6IFJlZjxVcGxvYWRVc2VyRmlsZVtdPiA9IHJlZihbXSk7XG5jb25zdCBsb2FkaW5nOiBSZWY8Ym9vbGVhbj4gPSByZWYodHJ1ZSk7XG48L3NjcmlwdD5cblxuPHRlbXBsYXRlPlxuXHQ8ZGl2IHYtbG9hZGluZz1sb2FkaW5nIHN0eWxlPVwibWluLWhlaWdodDogNDAwcHhcIj5cbiAgXHQ8aDIgc3R5bGU9XCJtaW4taGVpZ2h0OiAzMDBweFwiPlxuICAgICAgSSBzaG91bGQgbmV2ZXIgYmUgc2VlbiBub3dcbiAgICA8L2gyPlxuICA8L2Rpdj5cbjwvdGVtcGxhdGU+XG4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7fVxufSIsInRzY29uZmlnLmpzb24iOiJ7XG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZSxcbiAgICBcImpzeFwiOiBcInByZXNlcnZlXCIsXG4gICAgXCJ0YXJnZXRcIjogXCJFU05leHRcIixcbiAgICBcIm1vZHVsZVwiOiBcIkVTTmV4dFwiLFxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIkJ1bmRsZXJcIixcbiAgICBcImFsbG93SW1wb3J0aW5nVHNFeHRlbnNpb25zXCI6IHRydWVcbiAgfSxcbiAgXCJ2dWVDb21waWxlck9wdGlvbnNcIjoge1xuICAgIFwidGFyZ2V0XCI6IDMuM1xuICB9XG59XG4iLCJfbyI6e319