Fix repo selector loading state and client cache bug (#18813)

* fix loading state when considering new projects in listing

* change client persistance to debounced and not throttle

* rename for accuracy

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/components/RepositoryFinder.tsx

@@ -25,7 +25,6 @@ interface RepositoryFinderProps {
     setSelection: (repoUrl: string, projectID?: string) => void;
     onError?: (error: string) => void;
     disabled?: boolean;
-    loading?: boolean;
 }
 
 export default function RepositoryFinder(props: RepositoryFinderProps) {
@@ -152,7 +151,8 @@ export default function RepositoryFinder(props: RepositoryFinderProps) {
             expanded={!props.selectedContextURL}
             onSelectionChange={handleSelectionChange}
             disabled={props.disabled}
-            loading={props.loading || isLoading}
+            // Only consider the isLoading prop if we're including projects in list
+            loading={isLoading && includeProjectsOnCreateWorkspace}
             searchPlaceholder="Paste repository URL or type to find suggestions"
         >
             <DropDown2SelectedElement
@@ -173,7 +173,7 @@ export default function RepositoryFinder(props: RepositoryFinderProps) {
                         ? displayContextUrl(selectedSuggestion?.url)
                         : undefined
                 }
-                loading={props.loading || isLoading}
+                loading={isLoading && includeProjectsOnCreateWorkspace}
             />
         </DropDown2>
     );

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 debouncedSet = 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 debouncedSet(client);
+            } catch (e) {
                 console.error("unable to persist query client");
                 persistanceActive = false;
-            });
+            }
         },
         restoreClient: async () => {
             try {