diff --git a/apps/web/components/team/SkeletonloaderTeamList.tsx b/apps/web/components/team/SkeletonloaderTeamList.tsx new file mode 100644 index 0000000000..ddd93620e8 --- /dev/null +++ b/apps/web/components/team/SkeletonloaderTeamList.tsx @@ -0,0 +1,42 @@ +import React from "react"; + +import { SkeletonText } from "@calcom/ui"; + +import { ShellSubHeading } from "@components/Shell"; + +function SkeletonLoaderTeamList({ className }: { className?: string }) { + return ( + <> + + + ); +} + +export default SkeletonLoaderTeamList; + +function SkeletonItem() { + return ( +
  • +
    +
    + +
    + + +
    +
    +
    +
    +
    + + + +
    +
    +
    • + ); +} diff --git a/apps/web/pages/settings/teams/[id]/index.tsx b/apps/web/pages/settings/teams/[id]/index.tsx index 443fdb2b40..96da9b3ea4 100644 --- a/apps/web/pages/settings/teams/[id]/index.tsx +++ b/apps/web/pages/settings/teams/[id]/index.tsx @@ -4,15 +4,16 @@ import { useRouter } from "next/router"; import { useEffect, useState } from "react"; import showToast from "@calcom/lib/notification"; +import { SkeletonAvatar, SkeletonText } from "@calcom/ui"; import { Alert } from "@calcom/ui/Alert"; import { Button } from "@calcom/ui/Button"; import SAMLConfiguration from "@ee/components/saml/Configuration"; +import { QueryCell } from "@lib/QueryCell"; import { getPlaceholderAvatar } from "@lib/getPlaceholderAvatar"; import { useLocale } from "@lib/hooks/useLocale"; import { trpc } from "@lib/trpc"; -import Loader from "@components/Loader"; import Shell from "@components/Shell"; import MemberInvitationModal from "@components/team/MemberInvitationModal"; import MemberList from "@components/team/MemberList"; @@ -37,121 +38,151 @@ export function TeamSettingsPage() { const [showMemberInvitationModal, setShowMemberInvitationModal] = useState(false); const [errorMessage, setErrorMessage] = useState(""); - const { data: team, isLoading } = trpc.useQuery(["viewer.teams.get", { teamId: Number(router.query.id) }], { + const query = trpc.useQuery(["viewer.teams.get", { teamId: Number(router.query.id) }], { onError: (e) => { setErrorMessage(e.message); }, }); - const isAdmin = - team && (team.membership.role === MembershipRole.OWNER || team.membership.role === MembershipRole.ADMIN); - return ( - - ) - }> - {!!errorMessage && } - {isLoading && } - {team && ( - <> -
    -
    - {team.membership.role === MembershipRole.OWNER && - team.membership.isMissingSeat && - team.requiresUpgrade ? ( - - {t("hidden_team_owner_message")} - {/* - {"https://cal.com/upgrade"} - */} - - } - className="mb-4 " + { + return ( + + +
    + } + subtitle={} + HeadingLeftIcon={}> + <> +
    +
    +
    +
    + +
    +
    +
    +
    + + + ); + }} + success={({ data: team }) => { + const isAdmin = + team && + (team.membership.role === MembershipRole.OWNER || team.membership.role === MembershipRole.ADMIN); + return ( + - ) : ( - <> - {team.membership.isMissingSeat && ( - - )} - {team.membership.role === MembershipRole.OWNER && team.requiresUpgrade && ( - - {t("upgrade_to_flexible_pro_message")}
    - - - } - className="mb-4" - /> - )} - - )} + ) + }> + {!!errorMessage && } + {team && ( + <> +
    +
    + {team.membership.role === MembershipRole.OWNER && + team.membership.isMissingSeat && + team.requiresUpgrade ? ( + + {t("hidden_team_owner_message")} + {/* + {"https://cal.com/upgrade"} + */} + + } + className="mb-4 " + /> + ) : ( + <> + {team.membership.isMissingSeat && ( + + )} + {team.membership.role === MembershipRole.OWNER && team.requiresUpgrade && ( + + {t("upgrade_to_flexible_pro_message")}
    + + + } + className="mb-4" + /> + )} + + )} -
    - {isAdmin ? ( - - ) : ( -
    - {t("team_info")} -

    {team.bio}

    +
    + {isAdmin ? ( + + ) : ( +
    + {t("team_info")} +

    {team.bio}

    +
    + )} +
    +
    +

    {t("members")}

    + {isAdmin && ( +
    + +
    + )} +
    + + {isAdmin && }
    - )} -
    -
    -

    {t("members")}

    - {isAdmin && ( -
    - +
    +
    +
    + {showMemberInvitationModal && ( + setShowMemberInvitationModal(false)} + /> )} -
    - - {isAdmin && } -
    -
    - -
    -
    - {showMemberInvitationModal && ( - setShowMemberInvitationModal(false)} - /> - )} - - )} -     + + )} + + ); + }}> ); } diff --git a/apps/web/pages/settings/teams/index.tsx b/apps/web/pages/settings/teams/index.tsx index 21483cd6df..e6620b1bc3 100644 --- a/apps/web/pages/settings/teams/index.tsx +++ b/apps/web/pages/settings/teams/index.tsx @@ -12,15 +12,14 @@ import EmptyScreen from "@calcom/ui/EmptyScreen"; import useMeQuery from "@lib/hooks/useMeQuery"; import { trpc } from "@lib/trpc"; -import Loader from "@components/Loader"; import SettingsShell from "@components/SettingsShell"; +import SkeletonLoaderTeamList from "@components/team/SkeletonloaderTeamList"; import TeamCreateModal from "@components/team/TeamCreateModal"; import TeamList from "@components/team/TeamList"; function Teams() { const { t } = useLocale(); const { status } = useSession(); - const loading = status === "loading"; const [showCreateTeamModal, setShowCreateTeamModal] = useState(false); const [errorMessage, setErrorMessage] = useState(""); @@ -32,8 +31,6 @@ function Teams() { }, }); - if (loading) return ; - const teams = data?.filter((m) => m.accepted) || []; const invites = data?.filter((m) => !m.accepted) || []; const isFreePlan = me.data?.plan === "FREE"; @@ -78,7 +75,8 @@ function Teams() {
    )} - {!isLoading && !teams.length && ( + {isLoading && } + {!teams.length && !isLoading && ( = ({ width, height }) => { }; const SkeletonText: React.FC = ({ width, height }) => { - return
    ; + return
    ; }; const SkeletonButton: React.FC = ({ width, height }) => {