perf: server side render settings/organizations/general #20833

retrogtx · 2025-04-23T05:15:05Z

What does this PR do?

Moved data fetching logic from client-side hooks (useQuery, useSession) in the LegacyPage component (packages/.../general.tsx) to the server component Page (apps/web/.../general/page.tsx).
Implemented server-side data fetching in Page.tsx using the tRPC caller (appRouter.createCaller) to retrieve user and organization details.
Passed the fetched data (currentOrg, isAdminOrOwner, localeProp) down as props to the LegacyPage component.
Removed redundant client-side data fetching hooks and related logic from the LegacyPage component.

Screen.Recording.2025-04-24.at.10.54.39.AM.mov

Summary by mrge

Moved organization general settings data fetching from the client to the server for faster page loads and better security.

Refactors
- Server component now fetches user and organization data and passes it as props.
- Removed client-side data fetching and related hooks from the settings page.

…dling - Implement server-side session validation and redirection for unauthorized users. - Fetch current organization and user locale from the server. - Pass organization and user data to the LegacyPage component for improved rendering. - Refactor OrgGeneralView to accept props for current organization and user permissions.

vercel · 2025-04-23T05:15:09Z

@retrogtx is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

cubic-dev-ai

mrge found 3 issues across 2 files. View them in mrge.io

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/page.tsx

cubic-dev-ai · 2025-04-23T05:18:51Z

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/page.tsx

+  const ctx = await createContextInner({ session, locale: session.user.locale ?? "en" });
+  const caller = appRouter.createCaller(ctx);
+
+  const user = await caller.viewer.me.get();


Sequential API calls can be parallelized for better performance

damn you're right

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/page.tsx

cubic-dev-ai

mrge reviewed 2 files and found no issues. Review this PR in mrge.io.

hbjORbj · 2025-04-23T14:02:50Z

packages/features/ee/organizations/pages/settings/general.tsx

@@ -45,43 +42,22 @@ interface GeneralViewProps {
  localeProp: string;
 }

-const OrgGeneralView = () => {
+interface OrgGeneralViewProps {
+  currentOrg: NonNullable<RouterOutputs["viewer"]["organizations"]["listCurrent"]>;


NonNullable - love it

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/page.tsx

cubic-dev-ai

mrge found 1 issue across 2 files. View it in mrge.io

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/page.tsx

...app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/(main-page)/page.tsx

… unused components - Simplified the loading component import path. - Merged functionality from the deleted main-page into the general page for better organization. - Enhanced the page with server-side session handling and data fetching. - Removed obsolete skeleton and main-page files to streamline the codebase.

…page and header - Eliminated the Suspense component from the organization settings page and SettingsHeader to simplify rendering. - Streamlined the code by directly rendering child components without fallback loading states.

cubic-dev-ai

mrge found 4 issues across 5 files. View them in mrge.io

cubic-dev-ai · 2025-04-25T05:05:50Z

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/skeleton.tsx

+
+export function SkeletonLoader() {
+  const { t } = useLocale();
+  return (


Missing aria-busy="true" attribute on the container element for better accessibility during loading states.

cubic-dev-ai · 2025-04-25T05:05:50Z

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/skeleton.tsx

+  const { t } = useLocale();
+  return (
+    <SettingsHeader title={t("general")} description={t("general_description")} borderInShellHeader={true}>
+      <div className="space-y-8 rounded-md border border-neutral-200 bg-white p-6 dark:border-neutral-700 dark:bg-neutral-900">


Missing role="status" attribute on the container for accessibility.

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/page.tsx

cubic-dev-ai

mrge found 1 issue across 5 files. View it in mrge.io

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/page.tsx

github-actions · 2025-05-14T00:24:45Z

This PR is being marked as stale due to inactivity.

hbjORbj · 2025-05-26T18:51:02Z

@retrogtx Sorry for the delay! I will review tmrrow! please resolve conflicts btw!

hbjORbj

A few pointers:

I see that you have a skeleton UI for license key container as well. Is this needed? To my understanding, if license isn't there, user gets routed to /enterprise, anyways. So it is better to not have a skeleton UI for license key container to prevent a layout shift. Let me know if I am missing something here.
We are fetching the entire user object to get the locale only.
Rather, let's use:

  const locale = (await getLocale(buildLegacyRequest(await headers(), await cookies()))) ?? "en";

You need to create actions.ts and use revalidatePath to invalidate orgs data in this RSC whenever needed.

e.g., Search for how revalidateEventTypeEditPage is used throughout the codebase

hbjORbj · 2025-05-27T19:22:09Z

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/page.tsx

+  }
+
+  const isAdminOrOwner = checkAdminOrOwner(session.user.org?.role);
+  const localeProp = user?.locale ?? "en";


isn't this available from session.user? please check that and if not, use getLocale function as I mentioned above

retrogtx added 21 commits April 1, 2025 13:48

fix: trigger lingo.dev by removing duplicate value

755a5c0

Merge branch 'calcom:main' into main

2b8e944

Merge branch 'calcom:main' into main

eb090a1

Merge branch 'calcom:main' into main

7bfe71f

Merge branch 'calcom:main' into main

6b8b832

Merge branch 'calcom:main' into main

00942e6

Merge branch 'calcom:main' into main

d6dda16

Merge branch 'calcom:main' into main

0c43f23

Merge branch 'calcom:main' into main

5374610

Merge branch 'calcom:main' into main

c3e016d

Merge branch 'calcom:main' into main

3612d5a

Merge branch 'calcom:main' into main

1147eb4

Merge branch 'calcom:main' into main

e79dd41

Merge branch 'calcom:main' into main

f10db66

Merge branch 'calcom:main' into main

9ccfe56

Merge branch 'calcom:main' into main

1deb555

Merge branch 'calcom:main' into main

9b7a291

Merge branch 'calcom:main' into main

61a3892

Merge branch 'calcom:main' into main

83cd391

Merge branch 'calcom:main' into main

8b4b249

graphite-app bot added the community Created by Linear-GitHub Sync label Apr 23, 2025

graphite-app bot requested a review from a team April 23, 2025 05:15

keithwillcode added the community-interns The team responsible for reviewing, testing and shipping low/medium community PRs label Apr 23, 2025

dosubot bot added organizations area: organizations, orgs performance area: performance, page load, slow, slow endpoints, loading screen, unresponsive labels Apr 23, 2025

retrogtx marked this pull request as draft April 23, 2025 05:17

retrogtx changed the title ~~perf: Server-render organization general settings page~~ perf: server-render organization general settings page Apr 23, 2025

cubic-dev-ai bot reviewed Apr 23, 2025

View reviewed changes

hbjORbj requested changes Apr 23, 2025

View reviewed changes

github-actions bot marked this pull request as draft April 23, 2025 14:05

refactor: use util createRouterCaller as benny suggested

ceea74d

retrogtx marked this pull request as ready for review April 24, 2025 04:10

retrogtx requested a review from hbjORbj April 24, 2025 04:10

dosubot bot added the foundation label Apr 24, 2025

cubic-dev-ai bot reviewed Apr 24, 2025

View reviewed changes

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/page.tsx Show resolved Hide resolved

add skeleton and loading state

4ed1f60

hbjORbj requested changes Apr 24, 2025

View reviewed changes

...app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/(main-page)/page.tsx Outdated Show resolved Hide resolved

github-actions bot marked this pull request as draft April 24, 2025 14:02

retrogtx added 2 commits April 25, 2025 09:54

retrogtx requested a review from hbjORbj April 25, 2025 05:01

retrogtx marked this pull request as ready for review April 25, 2025 05:01

cubic-dev-ai bot reviewed Apr 25, 2025

View reviewed changes

hbjORbj requested changes Apr 27, 2025

View reviewed changes

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/page.tsx Outdated Show resolved Hide resolved

github-actions bot marked this pull request as draft April 27, 2025 11:54

fix: Update redirection path when no organisation is found

cdbc6df

retrogtx marked this pull request as ready for review April 27, 2025 12:19

cubic-dev-ai bot reviewed Apr 27, 2025

View reviewed changes

apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/general/page.tsx Show resolved Hide resolved

add back Suspense loading wrapper in SettingsHeader

3c5332d

retrogtx requested a review from hbjORbj April 29, 2025 04:54

github-actions bot added the Stale label May 14, 2025

github-actions bot removed the Stale label May 27, 2025

hbjORbj requested changes May 27, 2025

View reviewed changes

hbjORbj marked this pull request as draft May 27, 2025 19:13

hbjORbj reviewed May 27, 2025

View reviewed changes

perf: server side render settings/organizations/general #20833

Are you sure you want to change the base?

perf: server side render settings/organizations/general #20833

Uh oh!

Conversation

retrogtx commented Apr 23, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What does this PR do?

Summary by mrge

Uh oh!

vercel bot commented Apr 23, 2025

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cubic-dev-ai bot Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

retrogtx Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

hbjORbj Apr 23, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

cubic-dev-ai bot Apr 25, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cubic-dev-ai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions bot commented May 14, 2025

Uh oh!

hbjORbj commented May 26, 2025

Uh oh!

hbjORbj left a comment

Choose a reason for hiding this comment

Uh oh!

hbjORbj May 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

retrogtx commented Apr 23, 2025 •

edited

Loading