From 9641b7ad1eaab485aed8d5bdf8cd3d3a939397c6 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Fri, 31 Aug 2018 09:12:48 -0700
Subject: [PATCH] tweak timeline loading and worker dev mode (#525)

---
 routes/_actions/timeline.js                    |  3 +++
 routes/_components/timeline/LoadingFooter.html |  8 +++++++-
 routes/_components/timeline/Timeline.html      |  9 ++++++++-
 routes/_database/database.dev.js               |  3 ---
 routes/_database/database.js                   |  8 ++------
 routes/_database/database.workerize.js         |  3 +++
 webpack.client.config.js                       | 14 ++++++--------
 7 files changed, 29 insertions(+), 19 deletions(-)
 delete mode 100644 routes/_database/database.dev.js
 create mode 100644 routes/_database/database.workerize.js

diff --git a/routes/_actions/timeline.js b/routes/_actions/timeline.js
index 7747982..09bad11 100644
--- a/routes/_actions/timeline.js
+++ b/routes/_actions/timeline.js
@@ -45,6 +45,7 @@ async function fetchTimelineItems (instanceName, accessToken, timelineName, last
     stale = true
   } else {
     try {
+      console.log('fetchTimelineItemsFromNetwork')
       items = await fetchTimelineItemsFromNetwork(instanceName, accessToken, timelineName, lastTimelineItemId)
       /* no await */ storeFreshTimelineItemsInDatabase(instanceName, timelineName, items)
     } catch (e) {
@@ -115,9 +116,11 @@ export async function setupTimeline () {
 }
 
 export async function fetchTimelineItemsOnScrollToBottom (instanceName, timelineName) {
+  console.log('setting runningUpdate: true')
   store.setForTimeline(instanceName, timelineName, { runningUpdate: true })
   await fetchTimelineItemsAndPossiblyFallBack()
   setTimeout(() => {
+    console.log('setting runningUpdate: false')
     store.setForTimeline(instanceName, timelineName, { runningUpdate: false })
   }, SCROLL_TO_BOTTOM_DELAY) // delay to avoid spamming network calls on scroll to bottom
 }
diff --git a/routes/_components/timeline/LoadingFooter.html b/routes/_components/timeline/LoadingFooter.html
index dfff3d5..a443016 100644
--- a/routes/_components/timeline/LoadingFooter.html
+++ b/routes/_components/timeline/LoadingFooter.html
@@ -1,4 +1,4 @@
-<div class="loading-footer">
+<div class="loading-footer {shown ? '' : 'hidden'}">
   <LoadingSpinner size={48} />
   <span class="loading-footer-info">
     Loading more...
@@ -18,7 +18,13 @@
 </style>
 <script>
   import LoadingSpinner from '../LoadingSpinner.html'
+  import { store } from '../../_store/store'
+
   export default {
+    store: () => store,
+    computed: {
+      shown: ({ $timelineInitialized, $runningUpdate }) => ($timelineInitialized && $runningUpdate)
+    },
     components: {
       LoadingSpinner
     }
diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html
index 2169a60..ecc7345 100644
--- a/routes/_components/timeline/Timeline.html
+++ b/routes/_components/timeline/Timeline.html
@@ -1,4 +1,11 @@
 <h1 class="sr-only">{label}</h1>
+<!-- for debugging
+<div style="padding:5px;position:fixed;left:0;top:0;z-index:999999999;font-size:0.9em;width: 75vw;background:rgba(0, 0, 0, 0.8);color:white;pointer-events:none;">
+  <p>$timelineItemIds: {JSON.stringify(($timelineItemIds || []).map(_ => '...' + _.slice(-6)), null, '  ')}</p>
+  <p>$itemIdsToAdd: {JSON.stringify(($itemIdsToAdd || []).map(_ => '...' + _.slice(-6)), null, '  ')}</p>
+  <p>$runningUpdate: {$runningUpdate}</p>
+</div>
+-->
 <div class="timeline"
      role="feed"
      on:focusWithCapture="saveFocus(event)"
@@ -13,7 +20,7 @@
                 containerQuery=".container"
                 {makeProps}
                 items={$timelineItemIds}
-                showFooter={$timelineInitialized && $runningUpdate}
+                showFooter={true}
                 footerComponent={LoadingFooter}
                 showHeader={$showHeader}
                 headerComponent={MoreHeaderVirtualWrapper}
diff --git a/routes/_database/database.dev.js b/routes/_database/database.dev.js
deleted file mode 100644
index 0c88104..0000000
--- a/routes/_database/database.dev.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// vanilla version
-import * as database from './databaseWorker'
-export { database }
diff --git a/routes/_database/database.js b/routes/_database/database.js
index d07e1af..e1689f8 100644
--- a/routes/_database/database.js
+++ b/routes/_database/database.js
@@ -1,7 +1,3 @@
-// workerize version
-let database
-if (process.browser) {
-  const worker = require('./databaseWorker')
-  database = worker()
-}
+// dev version to play nice with IDEs
+import * as database from './databaseWorker'
 export { database }
diff --git a/routes/_database/database.workerize.js b/routes/_database/database.workerize.js
new file mode 100644
index 0000000..756320b
--- /dev/null
+++ b/routes/_database/database.workerize.js
@@ -0,0 +1,3 @@
+// workerize version, used in production
+const database = process.browser && require('./databaseWorker.js')()
+export { database }
diff --git a/webpack.client.config.js b/webpack.client.config.js
index 1f81bce..27b616a 100644
--- a/webpack.client.config.js
+++ b/webpack.client.config.js
@@ -10,9 +10,7 @@ const isDev = config.dev
 
 module.exports = {
   entry: config.client.entry(),
-  // uncomment to enable HMR within workers
-  // output: Object.assign(config.client.output(), { globalObject: 'this' }),
-  output: config.client.output(),
+  output: Object.assign(config.client.output(), { globalObject: 'this' }), // enables HMR in workers
   resolve: {
     extensions: ['.js', '.json', '.html']
   },
@@ -48,7 +46,7 @@ module.exports = {
           'css-loader'
         ]
       },
-      !isDev && { // workerize-loader makes dev mode hard (e.g. HMR)
+      {
         test: /\/_database\/databaseWorker\.js$/,
         use: [
           'workerize-loader'
@@ -86,12 +84,12 @@ module.exports = {
   plugins: [
     new LodashModuleReplacementPlugin({
       paths: true
-    })
-  ].concat(isDev ? [
+    }),
     new webpack.NormalModuleReplacementPlugin(
       /\/_database\/database\.js$/,
-      './database.dev.js'
-    ),
+      './database.workerize.js'
+    )
+  ].concat(isDev ? [
     new webpack.HotModuleReplacementPlugin({
       requestTimeout: 120000
     })