From 69c892807c0e0576e9fea12019fd7e99c610f4a3 Mon Sep 17 00:00:00 2001
From: Thomas Rittson <31796059+eliykat@users.noreply.github.com>
Date: Wed, 11 Aug 2021 12:52:44 +1000
Subject: [PATCH] Use custom virtual scroll strategy (#2002)

* update jslib

* Use custom virtual scroll strategy
---
 jslib                                          | 2 +-
 src/popup/app.module.ts                        | 2 ++
 src/popup/components/cipher-row.component.html | 2 +-
 src/popup/vault/ciphers.component.html         | 3 ++-
 src/popup/vault/groupings.component.html       | 3 ++-
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/jslib b/jslib
index 23309d33e2..c70c8ecc24 160000
--- a/jslib
+++ b/jslib
@@ -1 +1 @@
-Subproject commit 23309d33e2a335574ed898d6543040372d41526a
+Subproject commit c70c8ecc247cb92e1f867630031fd5cdf124bcd3
diff --git a/src/popup/app.module.ts b/src/popup/app.module.ts
index a36a8a5627..d79aad9b48 100644
--- a/src/popup/app.module.ts
+++ b/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,
diff --git a/src/popup/components/cipher-row.component.html b/src/popup/components/cipher-row.component.html
index b30cb3aead..818e44c1b8 100644
--- a/src/popup/components/cipher-row.component.html
+++ b/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">
diff --git a/src/popup/vault/ciphers.component.html b/src/popup/vault/ciphers.component.html
index 67cb8b398e..bddede8fa5 100644
--- a/src/popup/vault/ciphers.component.html
+++ b/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}}
diff --git a/src/popup/vault/groupings.component.html b/src/popup/vault/groupings.component.html
index ade7ba5593..7474459f57 100644
--- a/src/popup/vault/groupings.component.html
+++ b/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"