From 5d27688a70b19263d9f7294afe8ed79eaeb01a8a Mon Sep 17 00:00:00 2001
From: Bill Erickson <berickxx@gmail.com>
Date: Thu, 8 Nov 2018 13:58:20 -0500
Subject: [PATCH] Delay results rendering; initial checkboxes

Signed-off-by: Bill Erickson <berickxx@gmail.com>
---
 .../app/staff/catalog/result/record.component.html | 21 +++++++++-----
 .../staff/catalog/result/results.component.html    | 32 ++++++++++++----------
 .../app/staff/catalog/result/results.component.ts  | 12 ++++++++
 3 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.html
index 54ad3db0ee..971f8dea12 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.html
@@ -9,19 +9,24 @@
 <div class="col-lg-12 card tight-card mb-2 bg-light">
   <div class="card-body">
     <div class="row">
-      <div class="col-lg-1">
-        <a href="javascript:void(0)" (click)="navigatToRecord(summary.id)">
+      <div class="col-lg-2 d-flex">
+        <div class="checkbox">
+          <span class="font-weight-bold font-italic">
+            {{index + 1 + searchContext.pager.offset}}.
+          </span>
+          <input type='checkbox'/>
+        </div>
+        <div class="pl-2">
+          <a href="javascript:void(0)" (click)="navigatToRecord(summary.id)">
           <img style="height:80px"
             src="/opac/extras/ac/jacket/small/r/{{summary.id}}"/>
-        </a>
+          </a>
+        </div>
       </div>
-      <div class="col-lg-5">
+      <div class="col-lg-4">
         <div class="row">
           <div class="col-lg-12 font-weight-bold">
             <!-- nbsp allows the column to take shape when no value exists -->
-            <span class="font-weight-light font-italic">
-              #{{index + 1 + searchContext.pager.offset}}
-            </span>
             <a href="javascript:void(0)"
               (click)="navigatToRecord(summary.id)">
               {{summary.display.title || '&nbsp;'}}
@@ -114,6 +119,7 @@
                   <span i18n>Place Hold</span>
                 </button>
               </span>
+              <!--
               <span class="pl-1">
                 <button 
                   (click)="addToListDialog.recordId=summary.record.id(); addToListDialog.open({size: 'lg'})"
@@ -122,6 +128,7 @@
                   <span i18n>Add to List</span>
                 </button>
               </span>
+              -->
             </div>
           </div>
         </div>
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html
index ee9ca8ddf2..47589b07c4 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html
@@ -7,24 +7,26 @@
     <div class="col-lg-1"></div>
     <div class="col-lg-9">
       <div class="float-right">
-				<eg-catalog-result-pagination></eg-catalog-result-pagination>
+        <eg-catalog-result-pagination></eg-catalog-result-pagination>
       </div>
     </div>
   </div>
-	<div class="row mt-2">
-		<div class="col-lg-2">
-      <eg-catalog-result-facets></eg-catalog-result-facets>
-		</div>
-		<div class="col-lg-10">
-			<div *ngIf="searchContext.result">
-				<div *ngFor="let summary of searchContext.result.records; let idx = index">
-          <div *ngIf="summary">
-					  <eg-catalog-result-record [summary]="summary" [index]="idx">
-					  </eg-catalog-result-record>
+  <div>
+    <div class="row mt-2">
+      <div class="col-lg-2">
+        <eg-catalog-result-facets></eg-catalog-result-facets>
+      </div>
+      <div class="col-lg-10">
+        <div *ngIf="shouldStartRendering()">
+          <div *ngFor="let summary of searchContext.result.records; let idx = index">
+            <div *ngIf="summary">
+              <eg-catalog-result-record [summary]="summary" [index]="idx">
+              </eg-catalog-result-record>
+            </div>
           </div>
-				</div>
-			</div>
-		</div>
-	</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
diff --git a/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.ts b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.ts
index d9b7062e14..e2eadc830d 100644
--- a/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.ts
+++ b/Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.ts
@@ -67,6 +67,18 @@ export class ResultsComponent implements OnInit {
         }
     }
 
+    // Avoid starting to display records until the first few are ready
+    // to reduce page shuffling.
+    shouldStartRendering(): boolean {
+        return (
+            this.searchContext.result &&
+            this.searchContext.result.records && (   
+                this.searchContext.result.records.length === 0 || 
+                this.searchContext.result.records[0]
+            )
+        );
+    }
+
     fleshSearchResults(): void {
         const records = this.searchContext.result.records;
         if (!records || records.length === 0) { return; }
-- 
2.11.0