diff --git a/components/dashboard/package.json b/components/dashboard/package.json index fb84cc85244d71..59b8a93bae406e 100644 --- a/components/dashboard/package.json +++ b/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", diff --git a/components/dashboard/src/data/setup.tsx b/components/dashboard/src/data/setup.tsx index f5daa9a4c12ac7..069e7499f086f4 100644 --- a/components/dashboard/src/data/setup.tsx +++ b/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,15 +78,22 @@ 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) => { @@ -94,10 +101,12 @@ function createIDBPersister(idbValidKey: IDBValidKey = "gitpodQueryClient"): Per return; } - throttledSet(client).catch((e) => { + try { + await throttledSet(client); + } catch (e) { console.error("unable to persist query client"); persistanceActive = false; - }); + } }, restoreClient: async () => { try {