perf: reduces page flicker during refresh

frontend/src/components/content_value/ContentValueJson.vue

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

frontend/src/components/content_value/ContentValueString.vue

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

frontend/src/components/content_value/ContentValueWrapper.vue

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

frontend/src/stores/browser.js

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