Delay results rendering; initial checkboxes
authorBill Erickson <berickxx@gmail.com>
Thu, 8 Nov 2018 18:58:20 +0000 (13:58 -0500)
committerBill Erickson <berickxx@gmail.com>
Fri, 30 Nov 2018 16:34:20 +0000 (11:34 -0500)
Signed-off-by: Bill Erickson <berickxx@gmail.com>
Open-ILS/src/eg2/src/app/staff/catalog/result/record.component.html
Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.html
Open-ILS/src/eg2/src/app/staff/catalog/result/results.component.ts

index 54ad3db..971f8de 100644 (file)
@@ -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;'}}
                   <span i18n>Place Hold</span>
                 </button>
               </span>
+              <!--
               <span class="pl-1">
                 <button 
                   (click)="addToListDialog.recordId=summary.record.id(); addToListDialog.open({size: 'lg'})"
                   <span i18n>Add to List</span>
                 </button>
               </span>
+              -->
             </div>
           </div>
         </div>
index ee9ca8d..47589b0 100644 (file)
@@ -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>
 
index d9b7062..e2eadc8 100644 (file)
@@ -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; }