feat: add loaded progress for list/hash/set/zset/stream

frontend/src/components/content_value/ContentValueHash.vue

@@ -280,6 +280,11 @@ const entries = computed(() => {
     return `${len} / ${Math.max(len, props.length)}`
 })
 
+const loadProgress = computed(() => {
+    const len = size(props.value)
+    return (len * 100) / Math.max(len, props.length)
+})
+
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.HASH)
 }
@@ -355,6 +360,16 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
+        <!-- loaded progress -->
+        <n-progress
+            :border-radius="0"
+            :color="props.end ? '#0000' : themeVars.primaryColor"
+            :height="2"
+            :percentage="loadProgress"
+            :processing="props.loading"
+            :show-indicator="false"
+            status="success"
+            type="line" />
         <div id="content-table" class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table

frontend/src/components/content_value/ContentValueList.vue

@@ -257,6 +257,11 @@ const entries = computed(() => {
     return `${len} / ${Math.max(len, props.length)}`
 })
 
+const loadProgress = computed(() => {
+    const len = size(props.value)
+    return (len * 100) / Math.max(len, props.length)
+})
+
 const onAddValue = (value) => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.LIST)
 }
@@ -332,6 +337,16 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
+        <!-- loaded progress -->
+        <n-progress
+            :border-radius="0"
+            :color="props.end ? '#0000' : themeVars.primaryColor"
+            :height="2"
+            :percentage="loadProgress"
+            :processing="props.loading"
+            :show-indicator="false"
+            status="success"
+            type="line" />
         <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table

frontend/src/components/content_value/ContentValueSet.vue

@@ -254,6 +254,11 @@ const entries = computed(() => {
     return `${len} / ${Math.max(len, props.length)}`
 })
 
+const loadProgress = computed(() => {
+    const len = size(props.value)
+    return (len * 100) / Math.max(len, props.length)
+})
+
 const onAddValue = (value) => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.SET)
 }
@@ -329,6 +334,16 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
+        <!-- loaded progress -->
+        <n-progress
+            :border-radius="0"
+            :color="props.end ? '#0000' : themeVars.primaryColor"
+            :height="2"
+            :percentage="loadProgress"
+            :processing="props.loading"
+            :show-indicator="false"
+            status="success"
+            type="line" />
         <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table

frontend/src/components/content_value/ContentValueStream.vue

@@ -145,6 +145,11 @@ const entries = computed(() => {
     return `${len} / ${Math.max(len, props.length)}`
 })
 
+const loadProgress = computed(() => {
+    const len = size(props.value)
+    return (len * 100) / Math.max(len, props.length)
+})
+
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.STREAM)
 }
@@ -215,6 +220,16 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
+        <!-- loaded progress -->
+        <n-progress
+            :border-radius="0"
+            :color="props.end ? '#0000' : themeVars.primaryColor"
+            :height="2"
+            :percentage="loadProgress"
+            :processing="props.loading"
+            :show-indicator="false"
+            status="success"
+            type="line" />
         <div class="value-wrapper value-item-part flex-box-v flex-item-expand">
             <n-data-table
                 :bordered="false"

frontend/src/components/content_value/ContentValueZSet.vue

@@ -291,6 +291,11 @@ const entries = computed(() => {
     return `${len} / ${Math.max(len, props.length)}`
 })
 
+const loadProgress = computed(() => {
+    const len = size(props.value)
+    return (len * 100) / Math.max(len, props.length)
+})
+
 const onAddRow = () => {
     dialogStore.openAddFieldsDialog(props.name, props.db, props.keyPath, props.keyCode, types.ZSET)
 }
@@ -366,6 +371,16 @@ defineExpose({
                 {{ $t('interface.add_row') }}
             </n-button>
         </div>
+        <!-- loaded progress -->
+        <n-progress
+            :border-radius="0"
+            :color="props.end ? '#0000' : themeVars.primaryColor"
+            :height="2"
+            :percentage="loadProgress"
+            :processing="props.loading"
+            :show-indicator="false"
+            status="success"
+            type="line" />
         <div class="value-wrapper value-item-part flex-box-h flex-item-expand">
             <!-- table -->
             <n-data-table

frontend/src/components/sidebar/BrowserPane.vue

@@ -59,7 +59,7 @@ const loadProgress = computed(() => {
     if (db.maxKeys <= 0) {
         return 100
     }
-    return (db.keys * 100) / db.maxKeys
+    return (db.keys * 100) / Math.max(db.keys, db.maxKeys)
 })
 
 const onReload = async () => {