optimalization

packages/web/src/appobj/AppObjectList.svelte

@@ -5,6 +5,7 @@
 
   import AppObjectListItem from './AppObjectListItem.svelte';
   import { writable } from 'svelte/store';
+  import Link from '../elements/Link.svelte';
 
   export let list;
   export let module;
@@ -25,10 +26,13 @@
   export let groupFunc = undefined;
   export let onDropOnGroup = undefined;
   export let emptyGroupNames = [];
+  export let isExpandedOnlyBySearch = false;
 
   export let collapsedGroupNames = writable([]);
   export let onChangeFilteredList = undefined;
 
+  let expandLimited = false;
+
   $: matcher = module.createMatcher && module.createMatcher(filter, passProps?.searchSettings);
   $: childMatcher = module.createChildMatcher && module.createChildMatcher(filter, passProps?.searchSettings);
 
@@ -73,6 +77,10 @@
   }
 
   $: groups = groupFunc ? extendGroups(_.groupBy(listGrouped, 'group'), emptyGroupNames) : null;
+
+  $: listLimited =
+    isExpandedOnlyBySearch && !expandLimited ? filtered.slice(0, Math.min(filter.trim().length, 3)) : list;
+  $: isListLimited = isExpandedOnlyBySearch && listLimited.length < filtered.length;
 </script>
 
 {#if groupFunc}
@@ -98,7 +106,7 @@
     />
   {/each}
 {:else}
-  {#each list as data}
+  {#each listLimited as data}
     <AppObjectListItem
       isHidden={!filtered.includes(data)}
       {module}
@@ -117,4 +125,13 @@
       {setIsExpanded}
     />
   {/each}
+  {#if isListLimited}
+    <div class="ml-2">
+      <Link
+        onClick={() => {
+          expandLimited = true;
+        }}>Show next {filtered.length - listLimited.length}</Link
+      >
+    </div>
+  {/if}
 {/if}

packages/web/src/appobj/AppObjectListItem.svelte

@@ -63,7 +63,7 @@
   {#if (isExpanded || isExpandedBySearch) && subItemsComponent}
     <div class="subitems">
       <svelte:component
-        this={subItemsComponent(data)}
+        this={subItemsComponent(data, { isExpandedOnlyBySearch: isExpandedBySearch && !isExpanded })}
         {data}
         {filter}
         {passProps}

packages/web/src/appobj/SubDatabaseList.svelte

@@ -24,4 +24,5 @@
   module={databaseAppObject}
   {passProps}
   {filter}
+  {isExpandedOnlyBySearch}
 />

packages/web/src/appobj/SubProcedureLineList.svelte

@@ -8,6 +8,7 @@
 
   export let data;
   export let filter;
+  export let isExpandedOnlyBySearch;
 </script>
 
 <AppObjectList
@@ -16,4 +17,5 @@
   }))}
   module={procedureLineAppObject}
   {filter}
+  {isExpandedOnlyBySearch}
 />

packages/web/src/appobj/SubTableColumnList.svelte

@@ -6,6 +6,7 @@
 
   export let data;
   export let filter;
+  export let isExpandedOnlyBySearch;
 </script>
 
 <AppObjectList
@@ -16,4 +17,5 @@
   }))}
   module={columnAppObject}
   {filter}
+  {isExpandedOnlyBySearch}
 />

packages/web/src/widgets/SqlObjectList.svelte

@@ -269,9 +269,9 @@
             .map(x => ({ ...x, conid, database }))}
           module={databaseObjectAppObject}
           groupFunc={data => getObjectTypeFieldLabel(data.objectTypeField, driver)}
-          subItemsComponent={data =>
+          subItemsComponent={(data, { isExpandedOnlyBySearch }) =>
             data.objectTypeField == 'procedures' || data.objectTypeField == 'functions'
-              ? filter
+              ? filter && isExpandedOnlyBySearch
                 ? SubProcedureLineList
                 : SubProcedureParamList
               : SubTableColumnList}