diff --git a/components/dashboard/src/workspaces/Workspaces.tsx b/components/dashboard/src/workspaces/Workspaces.tsx
index 9bf6613fc9f346..96d6c68bbec9a2 100644
--- a/components/dashboard/src/workspaces/Workspaces.tsx
+++ b/components/dashboard/src/workspaces/Workspaces.tsx
@@ -41,6 +41,7 @@ import { VideoCarousel } from "./VideoCarousel";
 import { WorkspaceEntry } from "./WorkspaceEntry";
 import { WorkspacesSearchBar } from "./WorkspacesSearchBar";
 import { useInstallationConfiguration } from "../data/installation/installation-config-query";
+import { SkeletonBlock } from "@podkit/loading/Skeleton";
 
 export const GETTING_STARTED_DISMISSAL_KEY = "workspace-list-getting-started";
 
@@ -133,8 +134,10 @@ const WorkspacesPage: FunctionComponent = () => {
         }
     }, [user?.profile?.coachmarksDismissals]);
 
-    const { data: userSuggestedRepos } = useSuggestedRepositories({ excludeConfigurations: false });
-    const { data: orgSuggestedRepos } = useOrgSuggestedRepos();
+    const { data: userSuggestedRepos, isLoading: isUserSuggestedReposLoading } = useSuggestedRepositories({
+        excludeConfigurations: false,
+    });
+    const { data: orgSuggestedRepos, isLoading: isOrgSuggestedReposLoading } = useOrgSuggestedRepos();
 
     const suggestedRepos = useMemo(() => {
         const userSuggestions =
@@ -151,7 +154,9 @@ const WorkspacesPage: FunctionComponent = () => {
         });
 
         return [...userSuggestions, ...orgSuggestions].slice(0, 3);
-    }, [userSuggestedRepos, user, orgSuggestedRepos]);
+    }, [userSuggestedRepos, orgSuggestedRepos, user?.workspaceAutostartOptions]);
+
+    const suggestedReposLoading = isUserSuggestedReposLoading || isOrgSuggestedReposLoading;
 
     const toggleGettingStarted = useCallback(
         (show: boolean) => {
@@ -264,225 +269,259 @@ const WorkspacesPage: FunctionComponent = () => {
                                 </Card>
                             </div>
 
-                            {suggestedRepos.length > 0 && (
-                                <>
-                                    <Subheading className="font-semibold text-pk-content-primary mb-2 app-container">
-                                        Suggested
-                                    </Subheading>
-
-                                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:px-28 px-4">
-                                        {suggestedRepos.map((repo) => {
-                                            const isOrgSuggested =
-                                                (repo as SuggestedOrgRepository).orgSuggested ?? false;
-
-                                            return (
+                            <>
+                                <Subheading className="font-semibold text-pk-content-primary mb-2 app-container">
+                                    Suggested
+                                </Subheading>
+
+                                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:px-28 px-4">
+                                    {suggestedReposLoading ? (
+                                        <>
+                                            <SkeletonBlock className="w-full h-24" ready={false} />
+                                            <SkeletonBlock className="w-full h-24" ready={false} />
+                                            <SkeletonBlock className="w-full h-24" ready={false} />
+                                        </>
+                                    ) : (
+                                        <>
+                                            {suggestedRepos.map((repo) => {
+                                                const isOrgSuggested =
+                                                    (repo as SuggestedOrgRepository).orgSuggested ?? false;
+
+                                                return (
+                                                    <Card
+                                                        key={repo.url}
+                                                        href={`/new#${repo.url}`}
+                                                        className={cn(
+                                                            "border-[0.5px] hover:bg-pk-surface-tertiary transition-colors w-full",
+                                                            {
+                                                                "border-[#D79A45]": isOrgSuggested,
+                                                                "border-pk-border-base": !isOrgSuggested,
+                                                            },
+                                                        )}
+                                                    >
+                                                        <div className="min-w-0 w-full space-y-1.5">
+                                                            <CardTitle className="flex flex-row items-center gap-2 w-full">
+                                                                <span className="truncate block min-w-0 text-base">
+                                                                    {repo.configurationName || repo.repoName}
+                                                                </span>
+                                                                {isOrgSuggested && (
+                                                                    <PillLabel
+                                                                        className="capitalize bg-kumquat-light shrink-0 text-sm"
+                                                                        type="warn"
+                                                                    >
+                                                                        Recommended
+                                                                    </PillLabel>
+                                                                )}
+                                                            </CardTitle>
+                                                            <CardDescription className="truncate text-sm opacity-75">
+                                                                {repo.url}
+                                                            </CardDescription>
+                                                        </div>
+                                                    </Card>
+                                                );
+                                            })}
+                                            {suggestedRepos.length === 0 && (
                                                 <Card
-                                                    key={repo.url}
-                                                    href={`/new#${repo.url}`}
                                                     className={cn(
-                                                        "border-[0.5px] hover:bg-pk-surface-tertiary transition-colors w-full",
-                                                        {
-                                                            "border-[#D79A45]": isOrgSuggested,
-                                                            "border-pk-border-base": !isOrgSuggested,
-                                                        },
+                                                        "border-[0.5px] hover:bg-pk-surface-tertiary w-full border-pk-border-base h-24",
                                                     )}
                                                 >
                                                     <div className="min-w-0 w-full space-y-1.5">
                                                         <CardTitle className="flex flex-row items-center gap-2 w-full">
                                                             <span className="truncate block min-w-0 text-base">
-                                                                {repo.configurationName || repo.repoName}
+                                                                No suggestions yet
                                                             </span>
-                                                            {isOrgSuggested && (
-                                                                <PillLabel
-                                                                    className="capitalize bg-kumquat-light shrink-0 text-sm"
-                                                                    type="warn"
-                                                                >
-                                                                    Recommended
-                                                                </PillLabel>
-                                                            )}
                                                         </CardTitle>
                                                         <CardDescription className="truncate text-sm opacity-75">
-                                                            {repo.url}
+                                                            Start some workspaces to start seeing suggestions here.
                                                         </CardDescription>
                                                     </div>
                                                 </Card>
-                                            );
-                                        })}
+                                            )}
+                                        </>
+                                    )}
+                                </div>
+                            </>
+
+                            <Modal
+                                visible={isVideoModalVisible}
+                                onClose={handleVideoModalClose}
+                                containerClassName="min-[576px]:max-w-[600px]"
+                            >
+                                <ModalHeader>Demo video</ModalHeader>
+                                <ModalBody>
+                                    <div className="flex flex-row items-center justify-center">
+                                        <VideoSection
+                                            metadataVideoTitle="Gitpod demo"
+                                            playbackId="m01BUvCkTz7HzQKFoIcQmK00Rx5laLLoMViWBstetmvLs"
+                                            poster="https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp"
+                                            playerProps={{ onPlay: handlePlay, defaultHiddenCaptions: true }}
+                                            className="w-[535px] rounded-xl"
+                                        />
                                     </div>
-                                </>
-                            )}
+                                </ModalBody>
+                                <ModalBaseFooter>
+                                    <Button variant="secondary" onClick={handleVideoModalClose}>
+                                        Close
+                                    </Button>
+                                </ModalBaseFooter>
+                            </Modal>
                         </>
                     )}
-                    <Modal
-                        visible={isVideoModalVisible}
-                        onClose={handleVideoModalClose}
-                        containerClassName="min-[576px]:max-w-[600px]"
-                    >
-                        <ModalHeader>Demo video</ModalHeader>
-                        <ModalBody>
-                            <div className="flex flex-row items-center justify-center">
-                                <VideoSection
-                                    metadataVideoTitle="Gitpod demo"
-                                    playbackId="m01BUvCkTz7HzQKFoIcQmK00Rx5laLLoMViWBstetmvLs"
-                                    poster="https://i.ytimg.com/vi_webp/1ZBN-b2cIB8/maxresdefault.webp"
-                                    playerProps={{ onPlay: handlePlay, defaultHiddenCaptions: true }}
-                                    className="w-[535px] rounded-xl"
-                                />
-                            </div>
-                        </ModalBody>
-                        <ModalBaseFooter>
-                            <Button variant="secondary" onClick={handleVideoModalClose}>
-                                Close
-                            </Button>
-                        </ModalBaseFooter>
-                    </Modal>
-                </>
-            )}
 
-            {deleteModalVisible && (
-                <ConfirmationModal
-                    title="Delete Inactive Workspaces"
-                    areYouSureText="Are you sure you want to delete all inactive workspaces?"
-                    buttonText="Delete Inactive Workspaces"
-                    onClose={() => setDeleteModalVisible(false)}
-                    onConfirm={handleDeleteInactiveWorkspacesConfirmation}
-                    visible
-                />
-            )}
+                    {deleteModalVisible && (
+                        <ConfirmationModal
+                            title="Delete Inactive Workspaces"
+                            areYouSureText="Are you sure you want to delete all inactive workspaces?"
+                            buttonText="Delete Inactive Workspaces"
+                            onClose={() => setDeleteModalVisible(false)}
+                            onConfirm={handleDeleteInactiveWorkspacesConfirmation}
+                            visible
+                        />
+                    )}
 
-            {!isLoading &&
-                (activeWorkspaces.length > 0 || inactiveWorkspaces.length > 0 || searchTerm ? (
-                    <>
-                        <div
-                            className={
-                                !isDedicatedInstallation ? "!pl-0 app-container flex flex-1 flex-row" : "app-container"
-                            }
-                        >
-                            <div>
-                                <WorkspacesSearchBar
-                                    limit={limit}
-                                    searchTerm={searchTerm}
-                                    onLimitUpdated={setLimit}
-                                    onSearchTermUpdated={setSearchTerm}
-                                />
-                                <ItemsList className={!isDedicatedInstallation ? "app-container xl:!pr-4 pb-40" : ""}>
-                                    <div className="border-t border-gray-200 dark:border-gray-800"></div>
-                                    {filteredActiveWorkspaces.map((info) => {
-                                        return <WorkspaceEntry key={info.id} info={info} />;
-                                    })}
-                                    {filteredActiveWorkspaces.length > 0 && <div className="py-6"></div>}
-                                    {filteredInactiveWorkspaces.length > 0 && (
-                                        <div>
-                                            <div
-                                                onClick={() => setShowInactive(!showInactive)}
-                                                className="flex cursor-pointer p-6 flex-row bg-pk-surface-secondary hover:bg-pk-surface-tertiary text-pk-content-tertiary rounded-xl mb-2"
-                                            >
-                                                <div className="pr-2">
-                                                    <Arrow direction={showInactive ? "down" : "right"} />
-                                                </div>
-                                                <div className="flex flex-grow flex-col ">
-                                                    <div className="font-medium truncate">
-                                                        <span>Inactive Workspaces&nbsp;</span>
-                                                        <span className="text-gray-400 dark:text-gray-400 bg-gray-200 dark:bg-gray-600 rounded-xl px-2 py-0.5 text-xs">
-                                                            {filteredInactiveWorkspaces.length}
-                                                        </span>
-                                                    </div>
-                                                    <div className="text-sm flex-auto">
-                                                        Workspaces that have been stopped for more than 24 hours.
-                                                        Inactive workspaces are automatically deleted after 14 days.{" "}
-                                                        <a
-                                                            target="_blank"
-                                                            rel="noreferrer"
-                                                            className="gp-link"
-                                                            href="https://www.gitpod.io/docs/configure/workspaces/workspace-lifecycle#workspace-deletion"
-                                                            onClick={(evt) => evt.stopPropagation()}
-                                                        >
-                                                            Learn more
-                                                        </a>
+                    {!isLoading &&
+                        (activeWorkspaces.length > 0 || inactiveWorkspaces.length > 0 || searchTerm ? (
+                            <>
+                                <div
+                                    className={
+                                        !isDedicatedInstallation
+                                            ? "!pl-0 app-container flex flex-1 flex-row"
+                                            : "app-container"
+                                    }
+                                >
+                                    <div>
+                                        <WorkspacesSearchBar
+                                            limit={limit}
+                                            searchTerm={searchTerm}
+                                            onLimitUpdated={setLimit}
+                                            onSearchTermUpdated={setSearchTerm}
+                                        />
+                                        <ItemsList
+                                            className={!isDedicatedInstallation ? "app-container xl:!pr-4 pb-40" : ""}
+                                        >
+                                            <div className="border-t border-gray-200 dark:border-gray-800"></div>
+                                            {filteredActiveWorkspaces.map((info) => {
+                                                return <WorkspaceEntry key={info.id} info={info} />;
+                                            })}
+                                            {filteredActiveWorkspaces.length > 0 && <div className="py-6"></div>}
+                                            {filteredInactiveWorkspaces.length > 0 && (
+                                                <div>
+                                                    <div
+                                                        onClick={() => setShowInactive(!showInactive)}
+                                                        className="flex cursor-pointer p-6 flex-row bg-pk-surface-secondary hover:bg-pk-surface-tertiary text-pk-content-tertiary rounded-xl mb-2"
+                                                    >
+                                                        <div className="pr-2">
+                                                            <Arrow direction={showInactive ? "down" : "right"} />
+                                                        </div>
+                                                        <div className="flex flex-grow flex-col ">
+                                                            <div className="font-medium truncate">
+                                                                <span>Inactive Workspaces&nbsp;</span>
+                                                                <span className="text-gray-400 dark:text-gray-400 bg-gray-200 dark:bg-gray-600 rounded-xl px-2 py-0.5 text-xs">
+                                                                    {filteredInactiveWorkspaces.length}
+                                                                </span>
+                                                            </div>
+                                                            <div className="text-sm flex-auto">
+                                                                Workspaces that have been stopped for more than 24
+                                                                hours. Inactive workspaces are automatically deleted
+                                                                after 14 days.{" "}
+                                                                <a
+                                                                    target="_blank"
+                                                                    rel="noreferrer"
+                                                                    className="gp-link"
+                                                                    href="https://www.gitpod.io/docs/configure/workspaces/workspace-lifecycle#workspace-deletion"
+                                                                    onClick={(evt) => evt.stopPropagation()}
+                                                                >
+                                                                    Learn more
+                                                                </a>
+                                                            </div>
+                                                        </div>
+                                                        <div className="self-center">
+                                                            {showInactive ? (
+                                                                <Button
+                                                                    variant="ghost"
+                                                                    // TODO: Remove these classes once we decide on the new button style
+                                                                    // Leaving these to emulate the old button's danger.secondary style until we decide if we want that style or not
+                                                                    className="bg-red-50 dark:bg-red-300 hover:bg-red-100 dark:hover:bg-red-200 text-red-600 hover:text-red-700 hover:opacity-100"
+                                                                    onClick={(evt) => {
+                                                                        setDeleteModalVisible(true);
+                                                                        evt.stopPropagation();
+                                                                    }}
+                                                                >
+                                                                    Delete Inactive Workspaces
+                                                                </Button>
+                                                            ) : null}
+                                                        </div>
                                                     </div>
-                                                </div>
-                                                <div className="self-center">
                                                     {showInactive ? (
-                                                        <Button
-                                                            variant="ghost"
-                                                            // TODO: Remove these classes once we decide on the new button style
-                                                            // Leaving these to emulate the old button's danger.secondary style until we decide if we want that style or not
-                                                            className="bg-red-50 dark:bg-red-300 hover:bg-red-100 dark:hover:bg-red-200 text-red-600 hover:text-red-700 hover:opacity-100"
-                                                            onClick={(evt) => {
-                                                                setDeleteModalVisible(true);
-                                                                evt.stopPropagation();
-                                                            }}
-                                                        >
-                                                            Delete Inactive Workspaces
-                                                        </Button>
+                                                        <>
+                                                            {filteredInactiveWorkspaces.map((info) => {
+                                                                return <WorkspaceEntry key={info.id} info={info} />;
+                                                            })}
+                                                        </>
                                                     ) : null}
                                                 </div>
+                                            )}
+                                        </ItemsList>
+                                    </div>
+                                    {/* Show Educational if user is in gitpodIo */}
+                                    {!isDedicatedInstallation && (
+                                        <div className="max-xl:hidden border-l border-gray-200 dark:border-gray-800 pl-6 pt-5 pb-4 space-y-8">
+                                            <VideoCarousel />
+                                            <div className="flex flex-col gap-2">
+                                                <h3 className="text-lg font-semibold text-pk-content-primary">
+                                                    Documentation
+                                                </h3>
+                                                <div className="flex flex-col gap-1 w-fit">
+                                                    <a
+                                                        href="https://www.gitpod.io/docs/introduction"
+                                                        target="_blank"
+                                                        rel="noopener noreferrer"
+                                                        className="text-sm text-pk-content-primary items-center gap-x-2 flex flex-row"
+                                                    >
+                                                        <BookOpen width={20} />{" "}
+                                                        <span className="hover:text-blue-600 dark:hover:text-blue-400">
+                                                            Read the docs
+                                                        </span>
+                                                    </a>
+                                                    <a
+                                                        href="https://www.gitpod.io/docs/configure/workspaces"
+                                                        target="_blank"
+                                                        rel="noopener noreferrer"
+                                                        className="text-sm text-pk-content-primary items-center gap-x-2 flex flex-row"
+                                                    >
+                                                        <GitpodStrokedSVG />
+                                                        <span className="hover:text-blue-600 dark:hover:text-blue-400">
+                                                            Configuring a workspace
+                                                        </span>
+                                                    </a>
+                                                    <a
+                                                        href="https://www.gitpod.io/docs/references/gitpod-yml"
+                                                        target="_blank"
+                                                        rel="noopener noreferrer"
+                                                        className="text-sm text-pk-content-primary items-center gap-x-2 flex flex-row"
+                                                    >
+                                                        <Code width={20} />{" "}
+                                                        <span className="hover:text-blue-600 dark:hover:text-blue-400">
+                                                            .gitpod.yml reference
+                                                        </span>
+                                                    </a>
+                                                </div>
                                             </div>
-                                            {showInactive ? (
-                                                <>
-                                                    {filteredInactiveWorkspaces.map((info) => {
-                                                        return <WorkspaceEntry key={info.id} info={info} />;
-                                                    })}
-                                                </>
-                                            ) : null}
+                                            <PersonalizedContent />
+                                            <BlogBanners />
                                         </div>
                                     )}
-                                </ItemsList>
-                            </div>
-                            {/* Show Educational if user is in gitpodIo */}
-                            {!isDedicatedInstallation && (
-                                <div className="max-xl:hidden border-l border-gray-200 dark:border-gray-800 pl-6 pt-5 pb-4 space-y-8">
-                                    <VideoCarousel />
-                                    <div className="flex flex-col gap-2">
-                                        <h3 className="text-lg font-semibold text-pk-content-primary">Documentation</h3>
-                                        <div className="flex flex-col gap-1 w-fit">
-                                            <a
-                                                href="https://www.gitpod.io/docs/introduction"
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                className="text-sm text-pk-content-primary items-center gap-x-2 flex flex-row"
-                                            >
-                                                <BookOpen width={20} />{" "}
-                                                <span className="hover:text-blue-600 dark:hover:text-blue-400">
-                                                    Read the docs
-                                                </span>
-                                            </a>
-                                            <a
-                                                href="https://www.gitpod.io/docs/configure/workspaces"
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                className="text-sm text-pk-content-primary items-center gap-x-2 flex flex-row"
-                                            >
-                                                <GitpodStrokedSVG />
-                                                <span className="hover:text-blue-600 dark:hover:text-blue-400">
-                                                    Configuring a workspace
-                                                </span>
-                                            </a>
-                                            <a
-                                                href="https://www.gitpod.io/docs/references/gitpod-yml"
-                                                target="_blank"
-                                                rel="noopener noreferrer"
-                                                className="text-sm text-pk-content-primary items-center gap-x-2 flex flex-row"
-                                            >
-                                                <Code width={20} />{" "}
-                                                <span className="hover:text-blue-600 dark:hover:text-blue-400">
-                                                    .gitpod.yml reference
-                                                </span>
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <PersonalizedContent />
-                                    <BlogBanners />
                                 </div>
-                            )}
-                        </div>
-                    </>
-                ) : (
-                    <EmptyWorkspacesContent />
-                ))}
-
-            {isEnterpriseOnboardingEnabled && isDedicatedInstallation && welcomeMessage && user && (
-                <OrganizationJoinModal welcomeMessage={welcomeMessage} user={user} />
+                            </>
+                        ) : (
+                            <EmptyWorkspacesContent />
+                        ))}
+
+                    {isEnterpriseOnboardingEnabled && isDedicatedInstallation && welcomeMessage && user && (
+                        <OrganizationJoinModal welcomeMessage={welcomeMessage} user={user} />
+                    )}
+                </>
             )}
         </>
     );