LoadingState component

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);

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>
+    );
+};

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;

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 (

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();

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 (