tweak timeline loading and worker dev mode (#525)
This commit is contained in:
parent
2f1e4077ea
commit
9641b7ad1e
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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
|
||||
}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -1,3 +0,0 @@
|
|||
// vanilla version
|
||||
import * as database from './databaseWorker'
|
||||
export { database }
|
|
@ -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 }
|
||||
|
|
3
routes/_database/database.workerize.js
Normal file
3
routes/_database/database.workerize.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
// workerize version, used in production
|
||||
const database = process.browser && require('./databaseWorker.js')()
|
||||
export { database }
|
|
@ -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
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue