diff --git a/components/dashboard/src/app/AppLoading.tsx b/components/dashboard/src/app/AppLoading.tsx index c713472e7daf15..89752abb10fe39 100644 --- a/components/dashboard/src/app/AppLoading.tsx +++ b/components/dashboard/src/app/AppLoading.tsx @@ -7,7 +7,7 @@ import { FunctionComponent, useEffect, useState } from "react"; import { Heading3, Subheading } from "../components/typography/headings"; import gitpodIcon from "../icons/gitpod.svg"; -import { Delayed } from "../components/Delayed"; +import { Delayed } from "@podkit/loading/Delayed"; function useDelay(wait: number) { const [done, setDone] = useState(false); diff --git a/components/dashboard/src/components/Delayed.tsx b/components/dashboard/src/components/podkit/loading/Delayed.tsx similarity index 100% rename from components/dashboard/src/components/Delayed.tsx rename to components/dashboard/src/components/podkit/loading/Delayed.tsx diff --git a/components/dashboard/src/components/podkit/loading/LoadingState.tsx b/components/dashboard/src/components/podkit/loading/LoadingState.tsx new file mode 100644 index 00000000000000..84d0688ecbd4fc --- /dev/null +++ b/components/dashboard/src/components/podkit/loading/LoadingState.tsx @@ -0,0 +1,16 @@ +/** + * Copyright (c) 2023 Gitpod GmbH. All rights reserved. + * Licensed under the GNU Affero General Public License (AGPL). + * See License.AGPL.txt in the project root for license information. + */ + +import { Loader2 } from "lucide-react"; +import { Delayed } from "./Delayed"; + +export const LoadingState = () => { + return ( + <Delayed> + <Loader2 className="animate-spin" /> + </Delayed> + ); +}; diff --git a/components/dashboard/src/dedicated-setup/DedicatedSetup.tsx b/components/dashboard/src/dedicated-setup/DedicatedSetup.tsx index 3de35802974324..38d9c8aa646273 100644 --- a/components/dashboard/src/dedicated-setup/DedicatedSetup.tsx +++ b/components/dashboard/src/dedicated-setup/DedicatedSetup.tsx @@ -12,7 +12,6 @@ import { useConfetti } from "../contexts/ConfettiContext"; import { SetupCompleteStep } from "./SetupCompleteStep"; import { useOIDCClientsQuery } from "../data/oidc-clients/oidc-clients-query"; import { useCurrentOrg } from "../data/organizations/orgs-query"; -import { Delayed } from "../components/Delayed"; import { SpinnerLoader } from "../components/Loader"; import { getGitpodService } from "../service/service"; import { UserContext } from "../user-context"; @@ -21,6 +20,7 @@ import { useQueryParams } from "../hooks/use-query-params"; import { useDocumentTitle } from "../hooks/use-document-title"; import { forceDedicatedSetupParam } from "./use-show-dedicated-setup"; import { Organization } from "@gitpod/public-api/lib/gitpod/v1/organization_pb"; +import { Delayed } from "@podkit/loading/Delayed"; type Props = { onComplete: () => void; diff --git a/components/dashboard/src/repositories/detail/workspaces/WorkpaceSizeOptions.tsx b/components/dashboard/src/repositories/detail/workspaces/WorkpaceSizeOptions.tsx index 9e72f09ade240c..936d2a615e0f09 100644 --- a/components/dashboard/src/repositories/detail/workspaces/WorkpaceSizeOptions.tsx +++ b/components/dashboard/src/repositories/detail/workspaces/WorkpaceSizeOptions.tsx @@ -15,6 +15,7 @@ import { ConfigurationSettingsField } from "../ConfigurationSettingsField"; import { useUpdateProject } from "../../../data/projects/project-queries"; import { useToast } from "../../../components/toasts/Toasts"; import { LoadingButton } from "@podkit/buttons/LoadingButton"; +import { LoadingState } from "@podkit/loading/LoadingState"; interface Props { configuration: Configuration; @@ -58,12 +59,12 @@ export const ConfigurationWorkspaceSizeOptions = ({ configuration }: Props) => { [configuration.id, selectedValue, toast, updateProject], ); - if (isError) { + if (isError || !classes) { return <div>Something went wrong</div>; } - if (isLoading || !classes) { - return <div>Loading...</div>; + if (isLoading) { + return <LoadingState />; } return ( diff --git a/components/dashboard/src/teams/Members.tsx b/components/dashboard/src/teams/Members.tsx index 3a48df3bafcbb0..85fb3b4251142d 100644 --- a/components/dashboard/src/teams/Members.tsx +++ b/components/dashboard/src/teams/Members.tsx @@ -17,12 +17,12 @@ import searchIcon from "../icons/search.svg"; import { organizationClient } from "../service/public-api"; import { useCurrentUser } from "../user-context"; import { SpinnerLoader } from "../components/Loader"; -import { Delayed } from "../components/Delayed"; import { InputField } from "../components/forms/InputField"; import { InputWithCopy } from "../components/InputWithCopy"; import { OrganizationMember, OrganizationRole } from "@gitpod/public-api/lib/gitpod/v1/organization_pb"; import { useListOrganizationMembers, useOrganizationMembersInvalidator } from "../data/organizations/members-query"; import { useInvitationId, useInviteInvalidator } from "../data/organizations/invite-query"; +import { Delayed } from "@podkit/loading/Delayed"; export default function MembersPage() { const user = useCurrentUser(); diff --git a/components/dashboard/src/user-settings/Integrations.tsx b/components/dashboard/src/user-settings/Integrations.tsx index 24a8700ba11991..c044fe1c2abe23 100644 --- a/components/dashboard/src/user-settings/Integrations.tsx +++ b/components/dashboard/src/user-settings/Integrations.tsx @@ -12,7 +12,6 @@ import Alert from "../components/Alert"; import { CheckboxInputField, CheckboxListField } from "../components/forms/CheckboxInputField"; import ConfirmationModal from "../components/ConfirmationModal"; import { ContextMenuEntry } from "../components/ContextMenu"; -import { Delayed } from "../components/Delayed"; import InfoBox from "../components/InfoBox"; import { ItemsList } from "../components/ItemsList"; import { SpinnerLoader } from "../components/Loader"; @@ -30,6 +29,7 @@ import { SelectAccountModal } from "./SelectAccountModal"; import { useAuthProviders } from "../data/auth-providers/auth-provider-query"; import { useFeatureFlag } from "../data/featureflag-query"; import { EmptyMessage } from "../components/EmptyMessage"; +import { Delayed } from "@podkit/loading/Delayed"; export default function Integrations() { return (