diff --git a/packages/web/src/jsontree/JSONNested.svelte b/packages/web/src/jsontree/JSONNested.svelte index 0efa828ac..277f56f8c 100644 --- a/packages/web/src/jsontree/JSONNested.svelte +++ b/packages/web/src/jsontree/JSONNested.svelte @@ -29,8 +29,11 @@ const elementData = getContext('json-tree-element-data'); const slicedKeyCount = getContext('json-tree-sliced-key-count'); const keyLabel = labelOverride ?? key; + const PAGE_SIZE = 100; + let visibleKeyCount = PAGE_SIZE; - $: slicedKeys = expanded ? keys : previewKeys.slice(0, slicedKeyCount || 5); + // $: slicedKeys = expanded ? keys : previewKeys.slice(0, Math.max(slicedKeyCount || 5, visibleKeyCount)); + $: slicedKeys = expanded ? keys?.slice(0, visibleKeyCount) : previewKeys.slice(0, slicedKeyCount || 5); $: if (!isParentExpanded) { expanded = false; @@ -52,6 +55,12 @@ $: if (domElement && elementData && elementValue) { elementData.set(domElement, elementValue); } + + function showNextKeys() { + visibleKeyCount += PAGE_SIZE; + } + + $: visibleShowNextKeys = expanded && slicedKeys.length < keys.length;
  • @@ -84,13 +93,21 @@ , {/if} {/each} - {#if slicedKeys.length < previewKeys.length} + {#if !visibleShowNextKeys && slicedKeys.length < previewKeys.length} {/if} {:else} {/if} + + {#if visibleShowNextKeys} + + + (Next 100) + + {/if} + {bracketClose}
  • @@ -115,4 +132,18 @@ /* display: contents; */ position: relative; } + + .load-more { + margin-left: 2em; + font-style: italic; + color: var(--theme-font-link); + } + .load-more a { + color: var(--theme-font-link); + text-decoration: none; + cursor: pointer; + } + .load-more a:hover { + text-decoration: underline; + }