From 72f97a11ed9d6990fd60e39d16f55e00eb9b280f Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Mon, 26 Mar 2018 10:46:17 -0700
Subject: [PATCH 1/3] use virtual-list

---
 package.json              |  3 ++-
 src/components/hn-item.js |  4 ++--
 src/components/hn-list.js | 16 +++++++++-------
 3 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 36dc624..453bfde 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "lit-html": "^0.8.0",
     "pwa-helpers": "PolymerLabs/pwa-helpers",
     "redux-thunk": "^2.2.0",
-    "reselect": "^3.0.1"
+    "reselect": "^3.0.1",
+    "virtual-list": "github:PolymerLabs/virtual-list#master"
   }
 }
diff --git a/src/components/hn-item.js b/src/components/hn-item.js
index 721bcab..30d83e0 100644
--- a/src/components/hn-item.js
+++ b/src/components/hn-item.js
@@ -9,7 +9,7 @@
  */
 
 import { LitElement, html } from '../../node_modules/@polymer/lit-element/lit-element.js';
-import { repeat } from '../../node_modules/lit-html/lib/repeat.js';
+import { verticalList } from '../../node_modules/virtual-list/lit-html/lit-list.js';
 import { unsafeHTML } from '../../node_modules/lit-html/lib/unsafe-html.js';
 import { connect } from '../../node_modules/pwa-helpers/connect-mixin.js';
 import { fetchItem, fetchItemIfNeeded } from '../actions/items.js';
@@ -50,7 +50,7 @@ export class HnItemElement extends connect(store)(LitElement) {
           isFavorite="${favorites && item && favorites[item.id]}">
       </hn-summary>
       <div hidden="${!item.content}">${unsafeHTML(item.content)}</div>
-      ${repeat(comments, (comment) => html`
+      ${verticalList(comments, (comment) => html`
         <hn-comment id="${comment.id}" comment="${comment}" itemId="${item.id}"></hn-comment>
       `)}
     </div>
diff --git a/src/components/hn-list.js b/src/components/hn-list.js
index cb46f89..8ff0b13 100644
--- a/src/components/hn-list.js
+++ b/src/components/hn-list.js
@@ -9,7 +9,7 @@
  */
 
 import { LitElement, html } from '../../node_modules/@polymer/lit-element/lit-element.js';
-import { repeat } from '../../node_modules/lit-html/lib/repeat.js';
+import { verticalList } from '../../node_modules/virtual-list/lit-html/lit-list.js';
 import { connect } from '../../node_modules/pwa-helpers/connect-mixin.js';
 import { fetchList, fetchListIfNeeded } from '../actions/lists.js';
 import { loadFavorites } from '../actions/favorites.js';
@@ -41,6 +41,14 @@ export class HnListElement extends connect(store)(LitElement) {
         margin: 0 8px 8px 0;
       }
     </style>
+    <div>
+    ${verticalList(items, (item) => html`
+      <hn-summary
+          item="${item}"
+          isFavorite="${favorites && item && favorites[item.id]}">
+      </hn-summary>
+    `)}
+    </div>
     ${
       list.id !== 'favorites' ?
       html`
@@ -51,12 +59,6 @@ export class HnListElement extends connect(store)(LitElement) {
       ` :
       null
     }
-    ${repeat(items, (item) => html`
-      <hn-summary
-          item="${item}"
-          isFavorite="${favorites && item && favorites[item.id]}">
-      </hn-summary>
-    `)}
     ${
       list.id !== 'favorites' && items.length ?
       html`

From 17efb1fd894f0320e33476ff8888bb30393fbf2b Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Mon, 26 Mar 2018 11:04:52 -0700
Subject: [PATCH 2/3] set initial height so only 1 item is rendered

---
 src/components/hn-item.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/hn-item.js b/src/components/hn-item.js
index 30d83e0..f416b88 100644
--- a/src/components/hn-item.js
+++ b/src/components/hn-item.js
@@ -10,6 +10,7 @@
 
 import { LitElement, html } from '../../node_modules/@polymer/lit-element/lit-element.js';
 import { verticalList } from '../../node_modules/virtual-list/lit-html/lit-list.js';
+import Layout from '../../node_modules/virtual-list/layouts/layout-1d.js';
 import { unsafeHTML } from '../../node_modules/lit-html/lib/unsafe-html.js';
 import { connect } from '../../node_modules/pwa-helpers/connect-mixin.js';
 import { fetchItem, fetchItemIfNeeded } from '../actions/items.js';
@@ -29,6 +30,12 @@ store.addReducers({
 
 store.dispatch(loadFavorites());
 
+const layout = new Layout({
+  itemSize: {
+    y: 2000
+  }
+});
+
 export class HnItemElement extends connect(store)(LitElement) {
   render({ favorites, item }) {
     const comments = item.comments || [];
@@ -52,7 +59,7 @@ export class HnItemElement extends connect(store)(LitElement) {
       <div hidden="${!item.content}">${unsafeHTML(item.content)}</div>
       ${verticalList(comments, (comment) => html`
         <hn-comment id="${comment.id}" comment="${comment}" itemId="${item.id}"></hn-comment>
-      `)}
+      `, layout)}
     </div>
     ${item.failure ? html`<p>Item not found</p>` : ''}
     `;

From c208d37de20c91972b1c4e19595d44037298b5ee Mon Sep 17 00:00:00 2001
From: valdrinkoshi <valdrinkoshi@gmail.com>
Date: Mon, 26 Mar 2018 18:38:28 -0700
Subject: [PATCH 3/3] fix hn-loading-button z-index

---
 src/components/hn-item.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/hn-item.js b/src/components/hn-item.js
index f416b88..a13fb8e 100644
--- a/src/components/hn-item.js
+++ b/src/components/hn-item.js
@@ -47,10 +47,6 @@ export class HnItemElement extends connect(store)(LitElement) {
         border-bottom: 1px solid #e5e5e5;
       }
     </style>
-    <hn-loading-button
-        loading="${item.isFetching}"
-        on-click="${() => store.dispatch(fetchItem(item))}">
-    </hn-loading-button>
     <div hidden="${item.failure}">
       <hn-summary
           item="${item}"
@@ -62,6 +58,10 @@ export class HnItemElement extends connect(store)(LitElement) {
       `, layout)}
     </div>
     ${item.failure ? html`<p>Item not found</p>` : ''}
+    <hn-loading-button
+        loading="${item.isFetching}"
+        on-click="${() => store.dispatch(fetchItem(item))}">
+    </hn-loading-button>
     `;
   }