diff --git a/src/contexts/MapDataContext.js b/src/contexts/MapDataContext.js index a714be3..b00cf6c 100644 --- a/src/contexts/MapDataContext.js +++ b/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(); } diff --git a/src/workers/DatabaseWorker.js b/src/workers/DatabaseWorker.js index dba2aca..044329d 100644 --- a/src/workers/DatabaseWorker.js +++ b/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