tweak timeline loading and worker dev mode (#525)

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
 }

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
     }

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}

routes/_database/database.dev.js

@@ -1,3 +0,0 @@
-// vanilla version
-import * as database from './databaseWorker'
-export { database }

routes/_database/database.js

@@ -1,7 +1,3 @@
-// workerize version
+// dev version to play nice with IDEs
-let database
+import * as database from './databaseWorker'
-if (process.browser) {
-  const worker = require('./databaseWorker')
-  database = worker()
-}
 export { database }

routes/_database/database.workerize.js

@@ -0,0 +1,3 @@
+// workerize version, used in production
+const database = process.browser && require('./databaseWorker.js')()
+export { database }

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' }), // enables HMR in workers
-  // output: Object.assign(config.client.output(), { globalObject: 'this' }),
-  output: config.client.output(),
   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
     })