Add async loading of workspaces (#10487)

* Add async loading of workspaces in sidebar

* Fix popup

* Fix ellipsis character

airbyte-webapp/src/packages/cloud/locales/en.json

@@ -43,6 +43,7 @@
   "workspaces.subtitle": "Workspaces let you collaborate with team members and share sources across your team under a shared billing account.",
   "workspaces.create": "Create workspace",
   "workspaces.createNew": "Create new workspace",
+  "workspaces.loading": "Loading…",
 
   "settings.accountSettings.logoutLabel": "Sign out",
   "settings.accountSettings.logoutText": "Sign out",

airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx

@@ -47,6 +47,19 @@ export function useListCloudWorkspaces(): CloudWorkspace[] {
   ) as QueryObserverSuccessResult<CloudWorkspace[]>).data;
 }
 
+export function useListCloudWorkspacesAsync(): QueryObserverResult<
+  CloudWorkspace[]
+> {
+  const service = useGetWorkspaceService();
+  const user = useCurrentUser();
+
+  return useQuery<CloudWorkspace[]>(
+    workspaceKeys.lists(),
+    () => service.listByUser(user.userId),
+    { suspense: false }
+  );
+}
+
 export function useCreateWorkspace() {
   const service = useGetWorkspaceService();
   const queryClient = useQueryClient();

airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx

@@ -1,14 +1,14 @@
 import React, { useMemo } from "react";
 import styled from "styled-components";
 import { components } from "react-select";
-import { FormattedMessage } from "react-intl";
+import { FormattedMessage, useIntl } from "react-intl";
 import { MenuListComponentProps } from "react-select/src/components/Menu";
 
 import { Popout } from "components";
 import { IDataItem } from "components/base/DropDown/components/Option";
 import {
-  useListCloudWorkspaces,
   useWorkspaceService,
+  useListCloudWorkspacesAsync,
 } from "packages/cloud/services/workspaces/WorkspacesService";
 import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
 
@@ -102,14 +102,15 @@ const WorkspacesList: React.FC<MenuWithRequestButtonProps> = ({
 const WorkspacePopout: React.FC<{
   children: (props: { onOpen: () => void; value: any }) => React.ReactNode;
 }> = ({ children }) => {
-  const workspaceList = useListCloudWorkspaces();
+  const { formatMessage } = useIntl();
+  const { data: workspaceList, isLoading } = useListCloudWorkspacesAsync();
   const { selectWorkspace } = useWorkspaceService();
   const workspace = useCurrentWorkspace();
 
   const options = useMemo(
     () =>
       workspaceList
-        .filter((w) => w.workspaceId !== workspace.workspaceId)
+        ?.filter((w) => w.workspaceId !== workspace.workspaceId)
         .map((workspace) => ({
           value: workspace.workspaceId,
           label: workspace.name,
@@ -129,6 +130,12 @@ const WorkspacePopout: React.FC<{
       }}
       isSearchable={false}
       options={options}
+      isLoading={isLoading}
+      loadingMessage={() =>
+        formatMessage({
+          id: "workspaces.loading",
+        })
+      }
       value={workspace.slug}
       onChange={({ value }) => selectWorkspace(value)}
     />