perf: add loading status to "redis type tag"

frontend/src/components/common/RedisTypeTag.vue

@@ -3,6 +3,8 @@ import { computed } from 'vue'
 import { typesBgColor, typesColor, typesShortName } from '@/consts/support_redis_type.js'
 import Binary from '@/components/icons/Binary.vue'
 import { get, toUpper } from 'lodash'
+import { useThemeVars } from 'naive-ui'
+import Loading from '@/components/icons/Loading.vue'
 
 const props = defineProps({
     type: {
@@ -20,21 +22,24 @@ const props = defineProps({
     },
     round: Boolean,
     inverse: Boolean,
+    loading: Boolean,
 })
 
+const themeVars = useThemeVars()
+
 const fontColor = computed(() => {
     if (props.inverse) {
-        return typesBgColor[props.type]
+        return props.loading ? themeVars.value.tagColor : typesBgColor[props.type]
     } else {
-        return typesColor[props.type]
+        return props.loading ? themeVars.value.textColorBase : typesColor[props.type]
     }
 })
 
 const backgroundColor = computed(() => {
     if (props.inverse) {
-        return typesColor[props.type]
+        return props.loading ? themeVars.value.textColorBase : typesColor[props.type]
     } else {
-        return typesBgColor[props.type]
+        return props.loading ? themeVars.value.tagColor : typesBgColor[props.type]
     }
 })
 
@@ -49,6 +54,7 @@ const label = computed(() => {
 <template>
     <div
         v-if="props.point"
+        :class="{ 'redis-type-tag-loading': props.loading }"
         :style="{
             backgroundColor: fontColor,
             width: Math.max(props.pointSize, 5) + 'px',
@@ -61,12 +67,17 @@ const label = computed(() => {
             'redis-type-tag-normal': !props.short && props.size !== 'small',
             'redis-type-tag-small': !props.short && props.size === 'small',
             'redis-type-tag-round': props.round,
+            'redis-type-tag-loading': props.loading,
         }"
         :color="{ color: backgroundColor, textColor: fontColor }"
         :size="props.size"
         bordered
         strong>
-        <b>{{ label }}</b>
+        <b v-if="!props.loading">{{ label }}</b>
+        <n-icon v-else-if="props.short" size="14">
+            <loading stroke-width="4" />
+        </n-icon>
+        <b v-else>LOADING</b>
         <template #icon>
             <n-icon v-if="binaryKey" :component="Binary" size="18" />
         </template>
@@ -85,4 +96,20 @@ const label = computed(() => {
 .redis-type-tag-small {
     padding: 0 5px;
 }
+
+.redis-type-tag-loading {
+    animation: fadeInOut 2s infinite;
+}
+
+@keyframes fadeInOut {
+    0% {
+        opacity: 0.4;
+    }
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0.4;
+    }
+}
 </style>

frontend/src/components/icons/Loading.vue

@@ -0,0 +1,51 @@
+<script setup>
+const props = defineProps({
+    strokeWidth: {
+        type: [Number, String],
+        default: 3,
+    },
+})
+</script>
+
+<template>
+    <svg fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M7 4H41"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M7 44H41"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M11 44C13.6667 30.6611 18 23.9944 24 24C30 24.0056 34.3333 30.6722 37 44H11Z"
+            fill="none"
+            stroke="currentColor"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M37 4C34.3333 17.3389 30 24.0056 24 24C18 23.9944 13.6667 17.3278 11 4H37Z"
+            fill="none"
+            stroke="currentColor"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M21 15H27"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+        <path
+            :stroke-width="props.strokeWidth"
+            d="M19 38H29"
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round" />
+    </svg>
+</template>
+
+<style lang="scss" scoped></style>

frontend/src/components/sidebar/BrowserTree.vue

@@ -379,21 +379,14 @@ const renderPrefix = ({ option }) => {
                     },
                 )
             }
-            if (isEmpty(option.redisType) || option.redisType === 'loading') {
+            const loading = isEmpty(option.redisType) || option.redisType === 'loading'
+            if (loading) {
                 browserStore.loadKeyType({
                     server: props.server,
                     db: option.db,
                     key: option.redisKey,
                     keyCode: option.redisKeyCode,
                 })
-                // in loading
-                return h(
-                    NIcon,
-                    { size: 20 },
-                    {
-                        default: () => h(!!option.redisKeyCode ? Binary : Key),
-                    },
-                )
             }
             switch (prefStore.keyIconType) {
                 case typesIconStyle.FULL:
@@ -402,12 +395,14 @@ const renderPrefix = ({ option }) => {
                         short: false,
                         size: 'small',
                         inverse: includes(selectedKeys.value, option.key),
+                        loading,
                     })
 
                 case typesIconStyle.POINT:
                     return h(RedisTypeTag, {
                         type: toUpper(option.redisType),
                         point: true,
+                        loading,
                     })
 
                 case typesIconStyle.SHORT:
@@ -416,6 +411,7 @@ const renderPrefix = ({ option }) => {
                         type: toUpper(option.redisType),
                         short: true,
                         size: 'small',
+                        loading,
                         inverse: includes(selectedKeys.value, option.key),
                     })
             }