From eca6bd523e56de2d3758f5e98e43760fe0620d2d Mon Sep 17 00:00:00 2001
From: Lykin <137850705+tiny-craft@users.noreply.github.com>
Date: Thu, 14 Mar 2024 17:12:46 +0800
Subject: [PATCH] perf: reduces page flicker during refresh

---
 .../content_value/ContentValueJson.vue        |  8 ++---
 .../content_value/ContentValueString.vue      |  8 ++---
 .../content_value/ContentValueWrapper.vue     |  1 +
 frontend/src/stores/browser.js                | 33 +++++++++++++++----
 4 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/content_value/ContentValueJson.vue b/frontend/src/components/content_value/ContentValueJson.vue
index d9db921..45fa123 100644
--- a/frontend/src/components/content_value/ContentValueJson.vue
+++ b/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>
diff --git a/frontend/src/components/content_value/ContentValueString.vue b/frontend/src/components/content_value/ContentValueString.vue
index 7c39796..60da97b 100644
--- a/frontend/src/components/content_value/ContentValueString.vue
+++ b/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>
diff --git a/frontend/src/components/content_value/ContentValueWrapper.vue b/frontend/src/components/content_value/ContentValueWrapper.vue
index 008beeb..508f281 100644
--- a/frontend/src/components/content_value/ContentValueWrapper.vue
+++ b/frontend/src/components/content_value/ContentValueWrapper.vue
@@ -120,6 +120,7 @@ const onReload = async (selDecode, selFormat) => {
             decode: targetDecode,
             format: targetFormat,
             matchPattern,
+            showLoading: false,
         })
     } finally {
     }
diff --git a/frontend/src/stores/browser.js b/frontend/src/stores/browser.js
index 5438ce1..83d7957 100644
--- a/frontend/src/stores/browser.js
+++ b/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 })
+                }
             }
         },