Added worker implementation of database put

src/contexts/MapDataContext.js

@@ -6,7 +6,7 @@ import React, {
   useRef,
 } from "react";
 import * as Comlink from "comlink";
-import { decode } from "@msgpack/msgpack";
+import { decode, encode } from "@msgpack/msgpack";
 
 import { useAuth } from "./AuthContext";
 import { useDatabase } from "./DatabaseContext";
@@ -218,7 +218,16 @@ export function MapDataProvider({ children }) {
    */
   const putMap = useCallback(
     async (map) => {
-      await database.table("maps").put(map);
+      // Attempt to use worker to put map to avoid UI lockup
+      const packedMap = encode(map);
+      const success = await worker.putData(
+        Comlink.transfer(packedMap, [packedMap.buffer]),
+        "maps",
+        false
+      );
+      if (!success) {
+        await database.table("maps").put(map);
+      }
       if (map.owner !== userId) {
         await updateCache();
       }

src/workers/DatabaseWorker.js

@@ -4,7 +4,7 @@ import {
   exportDB,
   peakImportFile,
 } from "@mitchemmc/dexie-export-import";
-import { encode } from "@msgpack/msgpack";
+import { encode, decode } from "@msgpack/msgpack";
 
 import { getDatabase } from "../database";
 
@@ -46,6 +46,27 @@ let service = {
     } catch {}
   },
 
+  /**
+   * Put data into table encoded by msgpack
+   * @param {Uint8Array} data
+   * @param {string} table
+   * @param {boolean} wait Whether to wait for the put to finish
+   */
+  async putData(data, table, wait = true) {
+    try {
+      let db = getDatabase({});
+      const decoded = decode(data);
+      if (wait) {
+        await db.table(table).put(decoded);
+      } else {
+        db.table(table).put(decoded);
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  },
+
   /**
    * Export current database
    * @param {function} progressCallback