key count limit

packages/tools/src/dbKeysLoader.ts

@@ -1,7 +1,7 @@
 import _omit from 'lodash/omit';
 import _sortBy from 'lodash/sortBy';
 
-const SHOW_INCREMENT = 100;
+export const DB_KEYS_SHOW_INCREMENT = 100;
 
 export interface DbKeysNodeModelBase {
   text?: string;
@@ -247,6 +247,20 @@ export function dbKeys_markNodeExpanded(tree: DbKeysTreeModel, root: string, isE
   };
 }
 
+export function dbKeys_showNextItems(tree: DbKeysTreeModel, root: string): DbKeysTreeModel {
+  const node = tree.dirStateByKey[root];
+  return {
+    ...tree,
+    dirStateByKey: {
+      ...tree.dirStateByKey,
+      [root]: {
+        ...node,
+        visibleCount: (node?.visibleCount ?? DB_KEYS_SHOW_INCREMENT) + DB_KEYS_SHOW_INCREMENT,
+      },
+    },
+  };
+}
+
 export function dbKeys_createNewModel(treeKeySeparator: string): DbKeysTreeModel {
   const root: DbKeysFolderNodeModel = {
     level: 0,
@@ -265,7 +279,7 @@ export function dbKeys_createNewModel(treeKeySeparator: string): DbKeysTreeModel
     dirStateByKey: {
       '': {
         key: '',
-        visibleCount: SHOW_INCREMENT,
+        visibleCount: DB_KEYS_SHOW_INCREMENT,
         isExpanded: true,
       },
     },

packages/web/src/widgets/DbKeysSubTree.svelte

@@ -4,7 +4,12 @@
   import AppObjectCore from '../appobj/AppObjectCore.svelte';
 
   import DbKeysTreeNode from './DbKeysTreeNode.svelte';
-  import { dbKeys_markNodeExpanded, DbKeysChangeModelFunction, DbKeysTreeModel } from 'dbgate-tools';
+  import {
+    DB_KEYS_SHOW_INCREMENT,
+    dbKeys_showNextItems,
+    DbKeysChangeModelFunction,
+    DbKeysTreeModel,
+  } from 'dbgate-tools';
 
   export let key;
   export let connection;
@@ -20,9 +25,10 @@
   export let parentRoots = [];
 
   $: items = model.childrenByKey[key] ?? [];
+  $: visibleCount = model.dirStateByKey[key]?.visibleCount ?? DB_KEYS_SHOW_INCREMENT;
 </script>
 
-{#each items as item}
+{#each items.slice(0, visibleCount) as item}
   <DbKeysTreeNode
     {conid}
     {database}
@@ -37,16 +43,14 @@
   />
 {/each}
 
-{#if model.dirsByKey[key]?.shouldLoadNext}
+{#if model.childrenByKey[key]?.length > visibleCount}
-  <AppObjectCore {indentLevel} title="Loading keys..." icon="icon loading" expandIcon="icon invisible-box" />
-{:else if model.dirsByKey[key]?.hasNext}
   <AppObjectCore
     {indentLevel}
     title="Show more..."
     icon="icon dots-horizontal"
     expandIcon="icon invisible-box"
     on:click={() => {
-      changeModel(model => dbKeys_markNodeExpanded(model, key, true), false);
+      changeModel(model => dbKeys_showNextItems(model, key), false);
     }}
   />
 {/if}