change client persistance to debounced and not throttle

components/dashboard/package.json

@@ -25,7 +25,6 @@
     "js-cookie": "^3.0.1",
     "lodash.debounce": "^4.0.8",
     "monaco-editor": "^0.25.2",
-    "p-throttle": "^5.1.0",
     "pretty-bytes": "^6.1.0",
     "process": "^0.11.10",
     "query-string": "^7.1.1",

components/dashboard/src/data/setup.tsx

@@ -14,7 +14,7 @@ import {
 import { QueryCache, QueryClient, QueryKey } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { FunctionComponent } from "react";
-import pThrottle from "p-throttle";
+import debounce from "lodash.debounce";
 
 // This is used to version the cache
 // If data we cache changes in a non-backwards compatible way, increment this version
@@ -78,26 +78,35 @@ function createIDBPersister(idbValidKey: IDBValidKey = "gitpodQueryClient"): Per
     // If we get an error performing an operation, we'll disable persistance and assume it's not supported
     let persistanceActive = true;
 
-    const throttle = pThrottle({
-        interval: 500,
-        limit: 1,
-        strict: true,
-    });
-
-    const throttledSet = throttle(async (client: PersistedClient) => {
-        await set(idbValidKey, client);
-    });
+    // Ensure we don't persist the client too frequently
+    // Important to debounce (not throttle) this so we aren't queuing up a bunch of writes
+    // but instead, only persist the latest state
+    const throttledSet = debounce(
+        async (client: PersistedClient) => {
+            await set(idbValidKey, client);
+        },
+        500,
+        {
+            leading: true,
+            // important so we always persist the latest state when debouncing calls
+            trailing: true,
+            // ensure
+            maxWait: 1000,
+        },
+    );
 
     return {
         persistClient: async (client: PersistedClient) => {
             if (!persistanceActive) {
                 return;
             }
 
-            throttledSet(client).catch((e) => {
+            try {
+                await throttledSet(client);
+            } catch (e) {
                 console.error("unable to persist query client");
                 persistanceActive = false;
-            });
+            }
         },
         restoreClient: async () => {
             try {