tweak timeline loading and worker dev mode (#525)

This commit is contained in:
Nolan Lawson 2018-08-31 09:12:48 -07:00 committed by GitHub
parent 2f1e4077ea
commit 9641b7ad1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 29 additions and 19 deletions

View File

@ -45,6 +45,7 @@ async function fetchTimelineItems (instanceName, accessToken, timelineName, last
stale = true stale = true
} else { } else {
try { try {
console.log('fetchTimelineItemsFromNetwork')
items = await fetchTimelineItemsFromNetwork(instanceName, accessToken, timelineName, lastTimelineItemId) items = await fetchTimelineItemsFromNetwork(instanceName, accessToken, timelineName, lastTimelineItemId)
/* no await */ storeFreshTimelineItemsInDatabase(instanceName, timelineName, items) /* no await */ storeFreshTimelineItemsInDatabase(instanceName, timelineName, items)
} catch (e) { } catch (e) {
@ -115,9 +116,11 @@ export async function setupTimeline () {
} }
export async function fetchTimelineItemsOnScrollToBottom (instanceName, timelineName) { export async function fetchTimelineItemsOnScrollToBottom (instanceName, timelineName) {
console.log('setting runningUpdate: true')
store.setForTimeline(instanceName, timelineName, { runningUpdate: true }) store.setForTimeline(instanceName, timelineName, { runningUpdate: true })
await fetchTimelineItemsAndPossiblyFallBack() await fetchTimelineItemsAndPossiblyFallBack()
setTimeout(() => { setTimeout(() => {
console.log('setting runningUpdate: false')
store.setForTimeline(instanceName, timelineName, { runningUpdate: false }) store.setForTimeline(instanceName, timelineName, { runningUpdate: false })
}, SCROLL_TO_BOTTOM_DELAY) // delay to avoid spamming network calls on scroll to bottom }, SCROLL_TO_BOTTOM_DELAY) // delay to avoid spamming network calls on scroll to bottom
} }

View File

@ -1,4 +1,4 @@
<div class="loading-footer"> <div class="loading-footer {shown ? '' : 'hidden'}">
<LoadingSpinner size={48} /> <LoadingSpinner size={48} />
<span class="loading-footer-info"> <span class="loading-footer-info">
Loading more... Loading more...
@ -18,7 +18,13 @@
</style> </style>
<script> <script>
import LoadingSpinner from '../LoadingSpinner.html' import LoadingSpinner from '../LoadingSpinner.html'
import { store } from '../../_store/store'
export default { export default {
store: () => store,
computed: {
shown: ({ $timelineInitialized, $runningUpdate }) => ($timelineInitialized && $runningUpdate)
},
components: { components: {
LoadingSpinner LoadingSpinner
} }

View File

@ -1,4 +1,11 @@
<h1 class="sr-only">{label}</h1> <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" <div class="timeline"
role="feed" role="feed"
on:focusWithCapture="saveFocus(event)" on:focusWithCapture="saveFocus(event)"
@ -13,7 +20,7 @@
containerQuery=".container" containerQuery=".container"
{makeProps} {makeProps}
items={$timelineItemIds} items={$timelineItemIds}
showFooter={$timelineInitialized && $runningUpdate} showFooter={true}
footerComponent={LoadingFooter} footerComponent={LoadingFooter}
showHeader={$showHeader} showHeader={$showHeader}
headerComponent={MoreHeaderVirtualWrapper} headerComponent={MoreHeaderVirtualWrapper}

View File

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

View File

@ -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 } export { database }

View File

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

View File

@ -10,9 +10,7 @@ const isDev = config.dev
module.exports = { module.exports = {
entry: config.client.entry(), 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: { resolve: {
extensions: ['.js', '.json', '.html'] extensions: ['.js', '.json', '.html']
}, },
@ -48,7 +46,7 @@ module.exports = {
'css-loader' 'css-loader'
] ]
}, },
!isDev && { // workerize-loader makes dev mode hard (e.g. HMR) {
test: /\/_database\/databaseWorker\.js$/, test: /\/_database\/databaseWorker\.js$/,
use: [ use: [
'workerize-loader' 'workerize-loader'
@ -86,12 +84,12 @@ module.exports = {
plugins: [ plugins: [
new LodashModuleReplacementPlugin({ new LodashModuleReplacementPlugin({
paths: true paths: true
}) }),
].concat(isDev ? [
new webpack.NormalModuleReplacementPlugin( new webpack.NormalModuleReplacementPlugin(
/\/_database\/database\.js$/, /\/_database\/database\.js$/,
'./database.dev.js' './database.workerize.js'
), )
].concat(isDev ? [
new webpack.HotModuleReplacementPlugin({ new webpack.HotModuleReplacementPlugin({
requestTimeout: 120000 requestTimeout: 120000
}) })