perf: reduces page flicker during refresh
This commit is contained in:
parent
13b9a38095
commit
eca6bd523e
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -120,6 +120,7 @@ const onReload = async (selDecode, selFormat) => {
|
||||||
decode: targetDecode,
|
decode: targetDecode,
|
||||||
format: targetFormat,
|
format: targetFormat,
|
||||||
matchPattern,
|
matchPattern,
|
||||||
|
showLoading: false,
|
||||||
})
|
})
|
||||||
} finally {
|
} finally {
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 })
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue