Use custom virtual scroll strategy (#2002)

* update jslib

* Use custom virtual scroll strategy

jslib

@@ -1 +1 @@
-Subproject commit 23309d33e2a335574ed898d6543040372d41526a
+Subproject commit c70c8ecc247cb92e1f867630031fd5cdf124bcd3

src/popup/app.module.ts

@@ -57,6 +57,7 @@ import { ApiActionDirective } from 'jslib-angular/directives/api-action.directiv
 import { AutofocusDirective } from 'jslib-angular/directives/autofocus.directive';
 import { BlurClickDirective } from 'jslib-angular/directives/blur-click.directive';
 import { BoxRowDirective } from 'jslib-angular/directives/box-row.directive';
+import { CipherListVirtualScroll } from 'jslib-angular/directives/cipherListVirtualScroll.directive';
 import { FallbackSrcDirective } from 'jslib-angular/directives/fallback-src.directive';
 import { InputVerbatimDirective } from 'jslib-angular/directives/input-verbatim.directive';
 import { SelectCopyDirective } from 'jslib-angular/directives/select-copy.directive';
@@ -190,6 +191,7 @@ registerLocaleData(localeZhTw, 'zh-TW');
         BlurClickDirective,
         BoxRowDirective,
         CalloutComponent,
+        CipherListVirtualScroll,
         CipherRowComponent,
         CiphersComponent,
         CollectionsComponent,

src/popup/components/cipher-row.component.html

@@ -1,5 +1,5 @@
 <a (click)="selectCipher(cipher)" (dblclick)="launchCipher(cipher)" href="#" appStopClick
-    title="{{title}} - {{cipher.name}}" class="box-content-row box-content-row-flex">
+    title="{{title}} - {{cipher.name}}" class="box-content-row box-content-row-flex virtual-scroll-item">
     <div class="row-main">
         <app-vault-icon [cipher]="cipher"></app-vault-icon>
         <div class="row-main-content">

src/popup/vault/ciphers.component.html

@@ -63,7 +63,8 @@
                 </button>
             </ng-container>
         </div>
-        <cdk-virtual-scroll-viewport itemSize="46" *ngIf="ciphers.length" #virtualScrollViewport>
+        <cdk-virtual-scroll-viewport itemSize="46" minBufferPx="400" maxBufferPx="600" *ngIf="ciphers.length"
+            #virtualScrollViewport>
             <div class="box list only-list">
                 <div class="box-header">
                     {{groupingTitle}}

src/popup/vault/groupings.component.html

@@ -145,7 +145,8 @@
         <div class="no-items" *ngIf="!ciphers || !ciphers.length">
             <p>{{'noItemsInList' | i18n}}</p>
         </div>
-        <cdk-virtual-scroll-viewport itemSize="46" *ngIf="ciphers && ciphers.length > 0">
+        <cdk-virtual-scroll-viewport itemSize="46" minBufferPx="400" maxBufferPx="600"
+            *ngIf="ciphers && ciphers.length > 0">
             <div class="box list full-list">
                 <div class="box-content">
                     <app-cipher-row *cdkVirtualFor="let searchedCipher of ciphers" [cipher]="searchedCipher"