perf: ssr for /settings/organizations/teams/other (#20927)

packages/features/ee/organizations/pages/components/OtherTeamList.tsx

@@ -1,14 +1,16 @@
+"use client";
+
 import { useState } from "react";
 
 import { trackFormbricksAction } from "@calcom/lib/formbricks-client";
-import type { RouterOutputs } from "@calcom/trpc/react";
+import type { OrganizationRepository } from "@calcom/lib/server/repository/organization";
 import { trpc } from "@calcom/trpc/react";
 import { showToast } from "@calcom/ui/components/toast";
 
 import OtherTeamListItem from "./OtherTeamListItem";
 
 interface Props {
-  teams: RouterOutputs["viewer"]["organizations"]["listOtherTeams"];
+  teams: Awaited<ReturnType<typeof OrganizationRepository.findTeamsInOrgIamNotPartOf>>;
   pending?: boolean;
 }
 

packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx

@@ -1,24 +1,19 @@
-import SkeletonLoaderTeamList from "@calcom/ee/teams/components/SkeletonloaderTeamList";
+"use client";
+
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { trpc } from "@calcom/trpc/react";
-import { Alert } from "@calcom/ui/components/alert";
+import type { OrganizationRepository } from "@calcom/lib/server/repository/organization";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
 import OtherTeamList from "./OtherTeamList";
 
-export function OtherTeamsListing() {
+type OtherTeamsListingProps = {
+  teams: Awaited<ReturnType<typeof OrganizationRepository.findTeamsInOrgIamNotPartOf>>;
+};
+export function OtherTeamsListing({ teams }: OtherTeamsListingProps) {
   const { t } = useLocale();
 
-  const { data: teams, isPending, error } = trpc.viewer.organizations.listOtherTeams.useQuery();
-
-  if (isPending) {
-    return <SkeletonLoaderTeamList />;
-  }
-
   return (
     <>
-      {!!error && <Alert severity="error" title={error.message} />}
-
       {teams && teams.length > 0 ? (
         <OtherTeamList teams={teams} />
       ) : (

packages/features/ee/organizations/pages/settings/other-team-listing-view.tsx

@@ -1,16 +0,0 @@
-"use client";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-
-import { OtherTeamsListing } from "./../components/OtherTeamsListing";
-
-const OtherTeamListingView = (): React.ReactElement => {
-  const { t } = useLocale();
-  return (
-    <>
-      <OtherTeamsListing />
-    </>
-  );
-};
-
-export default OtherTeamListingView;