From 5e3e56d454745a6d51c86cc0aabd167006e503a4 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Tue, 16 Jan 2018 20:34:09 -0800 Subject: [PATCH] use IntersectionObserver for virtual scroll --- package-lock.json | 5 +++ package.json | 1 + routes/_components/Status.html | 2 +- routes/_components/Timeline.html | 5 +++ routes/_components/VirtualList.html | 2 - routes/_components/VirtualListItem.html | 60 +++++++++++++++++-------- routes/_utils/asyncModules.js | 7 ++- templates/main.js | 4 +- 8 files changed, 63 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9664624f..e3330b40 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3344,6 +3344,11 @@ "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.1.0.tgz", "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ=" }, + "intersection-observer": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/intersection-observer/-/intersection-observer-0.5.0.tgz", + "integrity": "sha512-8Zgt4ijlyvIrQVTA7MPb2W9+KhoetrAbxlh0RmTGxpx0+ZsAXvy7IsbNnZIrqZ6TddAdWeQj49x7Ph7Ir6KRkA==" + }, "intl-messageformat": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-2.2.0.tgz", diff --git a/package.json b/package.json index ec8a1a27..71720764 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "font-awesome-svg-png": "^1.2.2", "glob": "^7.1.2", "idb": "^2.0.4", + "intersection-observer": "^0.5.0", "intl-relativeformat": "^2.1.0", "lodash": "^4.17.4", "node-fetch": "^1.7.3", diff --git a/routes/_components/Status.html b/routes/_components/Status.html index 4617ba2c..bc5e51e0 100644 --- a/routes/_components/Status.html +++ b/routes/_components/Status.html @@ -61,7 +61,7 @@ ".............. status-toolbar"; grid-template-columns: 58px 1fr; border-bottom: 1px solid var(--main-border); - will-change: transform; /* TODO: is this necessary? */ + /* will-change: transform; */ /* TODO: is this necessary? */ } :global(.status-sidebar) { diff --git a/routes/_components/Timeline.html b/routes/_components/Timeline.html index c6bd7c63..3561d7ed 100644 --- a/routes/_components/Timeline.html +++ b/routes/_components/Timeline.html @@ -2,6 +2,11 @@ + \ No newline at end of file diff --git a/routes/_utils/asyncModules.js b/routes/_utils/asyncModules.js index 8f1c7b79..f3248ad1 100644 --- a/routes/_utils/asyncModules.js +++ b/routes/_utils/asyncModules.js @@ -13,7 +13,12 @@ const importTimeline = () => import( /* webpackChunkName: 'Timeline' */ '../_components/Timeline.html' ).then(mod => mod.default) +const importIntersectionObserver = () => import( + /* webpackChunkname: 'intersection-observer' */ 'intersection-observer' + ) + export { importURLSearchParams, - importTimeline + importTimeline, + importIntersectionObserver } \ No newline at end of file diff --git a/templates/main.js b/templates/main.js index f55c8724..924155ba 100644 --- a/templates/main.js +++ b/templates/main.js @@ -1,9 +1,11 @@ import { init } from 'sapper/runtime.js' import { importURLSearchParams } from '../routes/_utils/asyncModules' +import { importIntersectionObserver } from '../routes/_utils/asyncModules' // polyfills Promise.all([ - typeof URLSearchParams === 'undefined' && importURLSearchParams() + typeof URLSearchParams === 'undefined' && importURLSearchParams(), + typeof IntersectionObserver === 'undefined' && importIntersectionObserver() ]).then(() => { // `routes` is an array of route objects injected by Sapper init(document.querySelector('#sapper'), __routes__)