perf: reduces page flicker during refresh

This commit is contained in:
Lykin 2024-03-14 17:12:46 +08:00
parent 13b9a38095
commit eca6bd523e
4 changed files with 31 additions and 19 deletions

View File

@ -47,10 +47,7 @@ const keyType = redisTypes.JSON
const editingContent = ref('') const editingContent = ref('')
const displayValue = computed(() => { const displayValue = computed(() => {
if (props.loading) { return decodeRedisKey(props.value) || ''
return ''
}
return decodeRedisKey(props.value)
}) })
const enableSave = computed(() => { const enableSave = computed(() => {
@ -144,9 +141,7 @@ defineExpose({
</n-button-group> </n-button-group>
</div> </div>
<div class="value-wrapper value-item-part flex-item-expand flex-box-v"> <div class="value-wrapper value-item-part flex-item-expand flex-box-v">
<n-spin :show="props.loading" />
<content-editor <content-editor
v-show="!props.loading"
:content="displayValue" :content="displayValue"
:loading="props.loading" :loading="props.loading"
:offset-key="props.keyPath" :offset-key="props.keyPath"
@ -157,6 +152,7 @@ defineExpose({
@input="onInput" @input="onInput"
@reset="onInput" @reset="onInput"
@save="onSave" /> @save="onSave" />
<n-spin v-show="props.loading" />
</div> </div>
<div class="value-footer flex-box-h"> <div class="value-footer flex-box-h">
<n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}</n-text> <n-text v-if="showMemoryUsage">{{ $t('interface.memory_usage') }}: {{ formatBytes(props.size) }}</n-text>

View File

@ -77,10 +77,7 @@ const enableSave = computed(() => {
}) })
const displayValue = computed(() => { const displayValue = computed(() => {
if (props.loading) { return viewAs.value || decodeRedisKey(props.value) || ''
return ''
}
return viewAs.value || decodeRedisKey(props.value)
}) })
const showMemoryUsage = computed(() => { const showMemoryUsage = computed(() => {
@ -205,9 +202,7 @@ defineExpose({
</n-button-group> </n-button-group>
</div> </div>
<div class="value-wrapper value-item-part flex-item-expand flex-box-v"> <div class="value-wrapper value-item-part flex-item-expand flex-box-v">
<n-spin :show="props.loading || converting" />
<content-editor <content-editor
v-show="!(props.loading || converting)"
:content="displayValue" :content="displayValue"
:language="viewLanguage" :language="viewLanguage"
:loading="props.loading" :loading="props.loading"
@ -218,6 +213,7 @@ defineExpose({
@input="onInput" @input="onInput"
@reset="onInput" @reset="onInput"
@save="onSave" /> @save="onSave" />
<n-spin v-show="props.loading || converting" />
</div> </div>
<div class="value-footer flex-box-h"> <div class="value-footer flex-box-h">
<n-text v-if="!isNaN(props.length)">{{ $t('interface.length') }}: {{ props.length }}</n-text> <n-text v-if="!isNaN(props.length)">{{ $t('interface.length') }}: {{ props.length }}</n-text>

View File

@ -120,6 +120,7 @@ const onReload = async (selDecode, selFormat) => {
decode: targetDecode, decode: targetDecode,
format: targetFormat, format: targetFormat,
matchPattern, matchPattern,
showLoading: false,
}) })
} finally { } finally {
} }

View File

@ -467,16 +467,30 @@ const useBrowserStore = defineStore('browser', {
* @param {string} [decode] * @param {string} [decode]
* @param {string} [format] * @param {string} [format]
* @param {string} [matchPattern] * @param {string} [matchPattern]
* @param {boolean} [showLoading]
* @return {Promise<void>} * @return {Promise<void>}
*/ */
async reloadKey({ server, db, key, decode, format, matchPattern }) { async reloadKey({ server, db, key, decode, format, matchPattern, showLoading = true }) {
const tab = useTabStore() const tab = useTabStore()
try { try {
tab.updateLoading({ server, db, loading: true }) if (showLoading) {
tab.updateLoading({ server, db, loading: true })
}
await this.loadKeySummary({ server, db, key, clearValue: true }) await this.loadKeySummary({ server, db, key, clearValue: true })
await this.loadKeyDetail({ server, db, key, decode, format, matchPattern, reset: true }) await this.loadKeyDetail({
server,
db,
key,
decode,
format,
matchPattern,
reset: true,
showLoading: false,
})
} finally { } finally {
tab.updateLoading({ server, db, loading: false }) if (showLoading) {
tab.updateLoading({ server, db, loading: false })
}
} }
}, },
@ -490,16 +504,19 @@ const useBrowserStore = defineStore('browser', {
* @param {string} [matchPattern] * @param {string} [matchPattern]
* @param {boolean} [reset] * @param {boolean} [reset]
* @param {boolean} [full] * @param {boolean} [full]
* @param {boolean} [showLoading]
* @return {Promise<void>} * @return {Promise<void>}
*/ */
async loadKeyDetail({ server, db, key, format, decode, matchPattern, reset, full }) { async loadKeyDetail({ server, db, key, format, decode, matchPattern, reset, full, showLoading = true }) {
const tab = useTabStore() const tab = useTabStore()
const serverInst = this.servers[server] const serverInst = this.servers[server]
if (serverInst == null) { if (serverInst == null) {
return return
} }
try { try {
tab.updateLoading({ server, db, loading: true }) if (showLoading) {
tab.updateLoading({ server, db, loading: true })
}
const [storeFormat, storeDecode] = serverInst.getDecodeHistory(key, db) const [storeFormat, storeDecode] = serverInst.getDecodeHistory(key, db)
const { data, success, msg } = await GetKeyDetail({ const { data, success, msg } = await GetKeyDetail({
server, server,
@ -537,7 +554,9 @@ const useBrowserStore = defineStore('browser', {
$message.error('load key detail fail:' + msg) $message.error('load key detail fail:' + msg)
} }
} finally { } finally {
tab.updateLoading({ server, db, loading: false }) if (showLoading) {
tab.updateLoading({ server, db, loading: false })
}
} }
}, },