use workerize

package-lock.json

@@ -7826,6 +7826,14 @@
         "xtend": "4.0.1"
       }
     },
+    "workerize-loader": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/workerize-loader/-/workerize-loader-1.0.1.tgz",
+      "integrity": "sha512-OwkHyCnSrxnVXDJhyYlM2wcYW9RfE/DH76EmWLYJDcfWyiw53tyrs+WAUEBzRmiaf6f2W1ZNQ/Lky+PRcqDwew==",
+      "requires": {
+        "loader-utils": "1.1.0"
+      }
+    },
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",

package.json

@@ -47,6 +47,7 @@
     "url-search-params": "^0.10.0",
     "webpack": "^3.10.0",
     "webpack-bundle-analyzer": "^2.9.2",
+    "workerize-loader": "^1.0.1",
     "yargs": "^10.1.1"
   },
   "engines": {

routes/_components/Timeline.html

@@ -15,14 +15,13 @@
   import StatusListItem from './StatusListItem.html'
   import VirtualList from './VirtualList.html'
   import { splice, push } from 'svelte-extras'
-  import {
-    insertStatuses as insertStatusesIntoDatabase,
-    getTimeline as getTimelineFromDatabase
-  } from '../_utils/database/statuses'
+  import worker from 'workerize-loader!../_utils/database/statuses'
   import { mergeStatuses } from '../_utils/statuses'
   import { mark, stop } from '../_utils/marks'
   import { timelines } from '../_static/timelines'
 
+  const database = worker()
+
   const FETCH_LIMIT = 20
 
   export default {
@@ -33,9 +32,9 @@
       let timeline = this.get('timeline')
       let statuses = online ?
         await getTimeline(instanceName, instanceData.access_token, timeline, null, FETCH_LIMIT) :
-        await getTimelineFromDatabase(instanceName, timeline, null, FETCH_LIMIT)
+        await database.getTimeline(instanceName, timeline, null, FETCH_LIMIT)
       if (online) {
-        insertStatusesIntoDatabase(instanceName, timeline, statuses)
+        database.insertStatuses(instanceName, timeline, statuses)
       }
       this.addStatuses(statuses)
       this.set({initialized: true})
@@ -78,9 +77,9 @@
         let timeline = this.get('timeline')
         let newStatuses = online ?
           await getTimeline(instanceName, instanceData.access_token, timeline, lastStatusId, FETCH_LIMIT) :
-          await getTimelineFromDatabase(instanceName, timeline, lastStatusId, FETCH_LIMIT)
+          await database.getTimeline(instanceName, timeline, lastStatusId, FETCH_LIMIT)
         if (online) {
-          insertStatusesIntoDatabase(instanceName, timeline, newStatuses)
+          database.insertStatuses(instanceName, timeline, newStatuses)
         }
         let statuses = this.get('statuses')
         if (statuses) {

routes/_utils/database/keyval.js

@@ -1,2 +0,0 @@
-import keyval from 'idb-keyval'
-export { keyval }

routes/_utils/database/statuses.js

@@ -1,4 +1,4 @@
-import { keyval } from './keyval'
+import keyval from 'idb-keyval'
 import cloneDeep from 'lodash/cloneDeep'
 import padStart from 'lodash/padStart'
 
@@ -73,7 +73,7 @@ export async function getTimeline(instanceName, timeline, max_id = null, limit =
     }
 
     tx.oncomplete = () => resolve(res)
-    tx.onerror = reject
+    tx.onerror = () => reject(tx.error.name + ' ' + tx.error.message)
   })
 }
 
@@ -85,7 +85,7 @@ export async function insertStatuses(instanceName, timeline, statuses) {
     for (let status of statuses) {
       store.put(transformStatusForStorage(status))
     }
-    tx.oncomplete = resolve
-    tx.onerror = reject
+    tx.oncomplete = () => resolve()
+    tx.onerror = () => reject(tx.error.name + ' ' + tx.error.message)
   })
 }