refactor: use requestAnimationFrame to mitigate blocking of main thread

Author: aaronshaf

packages/idb-cache/src/index.ts

@@ -11,6 +11,7 @@ import {
   parseChunkIndexFromKey,
   getAllChunkKeysForBaseKey,
   deterministicUUID,
+  waitForAnimationFrame,
 } from "./utils";
 import { encryptionWorkerFunction } from "./encryptionWorkerFn";
 import {
@@ -373,6 +374,7 @@ export class IDBCache implements AsyncStorage {
       if (!this.dbReadyPromise) return null;
       await this.ensureWorkerInitialized();
 
+      await waitForAnimationFrame();
       const db = await this.dbReadyPromise;
       const baseKey = await deterministicUUID(`${this.cacheKey}:${itemKey}`);
       const now = Date.now();
@@ -509,6 +511,7 @@ export class IDBCache implements AsyncStorage {
       if (!this.dbReadyPromise) return;
       await this.ensureWorkerInitialized();
 
+      await waitForAnimationFrame();
       const db = await this.dbReadyPromise;
       const baseKey = await deterministicUUID(`${this.cacheKey}:${itemKey}`);
       const expirationTimestamp = Date.now() + this.gcTime;

packages/idb-cache/src/utils.ts

@@ -10,6 +10,12 @@ import { LRUCache } from "./LRUCache";
 
 const uuidCache = new LRUCache<string, string>(1000);
 
+// Used to avoid main thread blocking
+//   even though it slows operations
+export function waitForAnimationFrame() {
+  return new Promise((resolve) => requestAnimationFrame(resolve));
+}
+
 function isValidHex(hex: string): boolean {
   return /^[0-9a-fA-F]{128}$/.test(hex);
 }
@@ -55,6 +61,7 @@ export async function deterministicUUID(key: string): Promise<string> {
 
   const encoder = new TextEncoder();
   const data = encoder.encode(key);
+  // Usually under 1 ms; not outsourced to worker
   const hashBuffer = await crypto.subtle.digest("SHA-512", data);
   const hashHex = bufferToHex(hashBuffer);
 
@@ -126,6 +133,7 @@ export async function openDatabase<T extends DBSchema>(
   dbVersion: number
 ): Promise<import("idb").IDBPDatabase<T>> {
   try {
+    await waitForAnimationFrame();
     return await openDB<T>(dbName, dbVersion, {
       upgrade(db) {
         createStoreWithIndexes(db, storeName);
@@ -135,6 +143,7 @@ export async function openDatabase<T extends DBSchema>(
     if (error instanceof DOMException && error.name === "VersionError") {
       console.warn(`VersionError: Deleting database ${dbName} and retrying...`);
       await deleteDB(dbName);
+      await waitForAnimationFrame();
       return await openDB<T>(dbName, dbVersion, {
         upgrade(db) {
           createStoreWithIndexes(db, storeName);