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
} 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
}

View file

@ -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
}

View file

@ -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}

View file

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

View file

@ -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 }

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 = {
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
})