From 30ba168fc35974e5959ca039152500933faae84b Mon Sep 17 00:00:00 2001
From: Alex / KATT <alexander@n1s.se>
Date: Wed, 24 Jan 2024 00:42:29 +0100
Subject: [PATCH] chore: bump `@trpc/*` and `@tanstack/react-query` (#13335)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Omar López <zomars@me.com>
Co-authored-by: CarinaWolli <wollencarina@gmail.com>
Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: zomars <zomars@me.com>
Co-authored-by: Udit Takkar <53316345+Udit-takkar@users.noreply.github.com>
Co-authored-by: Benny Joo <sldisek783@gmail.com>
Co-authored-by: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Co-authored-by: Gergő Móricz <mo.geryy@gmail.com>
Co-authored-by: Keith Williams <keithwillcode@gmail.com>
---
 apps/web/app/_trpc/createHydrateClient.tsx    |  13 +-
 apps/web/app/_trpc/trpc-provider.tsx          |   5 +-
 .../apps/AdditionalCalendarSelector.tsx       |   6 +-
 apps/web/components/apps/AppPage.tsx          |  34 +-
 .../components/apps/CalendarListContainer.tsx |  10 +-
 .../components/apps/InstallAppButtonChild.tsx |   4 +-
 .../components/booking/BookingListItem.tsx    |   8 +-
 .../components/dialog/ChargeCardDialog.tsx    |   2 +-
 .../components/dialog/RescheduleDialog.tsx    |   4 +-
 .../web/components/eventtype/EventAppsTab.tsx |   6 +-
 .../eventtype/EventAvailabilityTab.tsx        |  25 +-
 .../eventtype/EventTypeSingleLayout.tsx       |   2 +-
 .../components/eventtype/EventWebhooksTab.tsx |   4 +-
 .../eventtype/InstantEventController.tsx      |   4 +-
 .../eventtype/ManagedEventDialog.tsx          |   6 +-
 .../components/AppConnectionItem.tsx          |   2 +-
 .../steps-views/ConnectCalendars.tsx          |   4 +-
 .../steps-views/ConnectedVideoStep.tsx        |   6 +-
 .../steps-views/UserSettings.tsx              |   2 +-
 apps/web/components/setup/StepDone.tsx        |   4 +-
 .../UsernameAvailability/PremiumTextfield.tsx |   4 +-
 .../UsernameTextfield.tsx                     |   2 +-
 apps/web/lib/QueryCell.tsx                    |  44 +-
 apps/web/package.json                         |   2 +-
 apps/web/pages/auth/login.tsx                 |  17 +-
 apps/web/pages/auth/oauth2/authorize.tsx      |  10 +-
 apps/web/pages/auth/setup/index.tsx           |  18 +-
 apps/web/pages/auth/verify-email.tsx          |   2 +-
 apps/web/pages/availability/[schedule].tsx    |  14 +-
 apps/web/pages/availability/index.tsx         |  24 +-
 apps/web/pages/bookings/[status].tsx          |   2 +-
 apps/web/pages/connect-and-join.tsx           |   2 +-
 apps/web/pages/event-types/[type]/index.tsx   |   4 +-
 apps/web/pages/event-types/index.tsx          |   6 +-
 .../web/pages/settings/developer/api-keys.tsx |   4 +-
 .../pages/settings/my-account/appearance.tsx  |   8 +-
 .../web/pages/settings/my-account/general.tsx |  10 +-
 .../my-account/out-of-office/index.tsx        |  10 +-
 .../web/pages/settings/my-account/profile.tsx |  18 +-
 .../pages/settings/security/impersonation.tsx |   6 +-
 apps/web/pages/settings/security/password.tsx |  14 +-
 .../settings/security/two-factor-auth.tsx     |   4 +-
 apps/web/server/lib/ssg.ts                    |   4 +-
 apps/web/server/lib/ssr.ts                    |   4 +-
 .../_components/OmniInstallAppButton.tsx      |   2 +-
 .../app-store/_utils/useAddAppMutation.ts     | 105 ++--
 packages/app-store/alby/pages/setup/index.tsx |   2 +-
 .../components/EventTypeAppCardInterface.tsx  |  36 +-
 packages/app-store/components.tsx             |   6 +-
 .../components/InstallAppButton.tsx           |   2 +-
 .../components/InstallAppButton.tsx           |   2 +-
 .../giphy/components/SearchDialog.tsx         |  20 +-
 packages/app-store/make/pages/setup/index.tsx |   2 +-
 .../app-store/paypal/pages/setup/index.tsx    |   2 +-
 .../routing-forms/components/FormActions.tsx  |  16 +-
 .../routing-forms/components/SingleForm.tsx   |   8 +-
 .../pages/reporting/[...appPages].tsx         |   8 +-
 .../pages/routing-link/[...appPages].tsx      |   2 +-
 packages/app-store/types.d.ts                 |   2 +-
 .../components/confirmDialog.tsx              |  22 +-
 .../components/wipeMyCalActionButton.tsx      |   4 +-
 .../app-store/zapier/pages/setup/index.tsx    |   2 +-
 packages/features/apps/AdminAppsList.tsx      |   4 +-
 packages/features/bookings/Booker/Booker.tsx  |   8 +-
 .../BookEventForm/BookEventForm.tsx           |   2 +-
 .../bookings/Booker/components/DatePicker.tsx |   2 +-
 .../bookings/Booker/components/EventMeta.tsx  |   9 +-
 .../Booker/components/LargeCalendar.tsx       |   2 +-
 .../Booker/components/hooks/useBookings.ts    |  56 +-
 .../Booker/components/hooks/useCalendars.ts   |  18 +-
 .../bookings/components/EventTypeFilter.tsx   |  32 +-
 .../bookings/components/VerifyCodeDialog.tsx  |  20 +-
 .../features/calendars/CalendarSwitch.tsx     |  34 +-
 packages/features/calendars/DatePicker.tsx    |   6 +-
 .../calendars/DestinationCalendarSelector.tsx |   6 +-
 .../features/calendars/datepicker.stories.mdx |   6 +-
 .../weeklyview/components/Calendar.tsx        |   2 +-
 .../calendars/weeklyview/types/state.ts       |   2 +-
 .../ee/api-keys/components/ApiKeyListItem.tsx |   2 +-
 .../components/AboutOrganizationForm.tsx      |   4 +-
 .../components/AddNewTeamsForm.tsx            |   4 +-
 .../components/CreateANewOrganizationForm.tsx |   4 +-
 .../components/SetPasswordForm.tsx            |   4 +-
 .../pages/components/OtherTeamList.tsx        |   2 +-
 .../pages/components/OtherTeamListItem.tsx    |   4 +-
 .../pages/components/OtherTeamsListing.tsx    |  14 +-
 .../pages/settings/admin/AdminOrgEditPage.tsx |   2 +-
 .../pages/settings/appearance.tsx             |  25 +-
 .../organizations/pages/settings/general.tsx  |  22 +-
 .../settings/other-team-members-view.tsx      |  72 ++-
 .../settings/other-team-profile-view.tsx      |  50 +-
 .../organizations/pages/settings/profile.tsx  |  25 +-
 .../ee/sso/components/SSOConfiguration.tsx    |  18 +-
 .../features/ee/sso/page/teams-sso-view.tsx   |  19 +-
 .../ee/support/components/HelpMenuItem.tsx    |   2 +-
 .../ee/teams/components/AddNewTeamMembers.tsx |   8 +-
 .../teams/components/CreateANewTeamForm.tsx   |   8 +-
 .../components/DisableTeamImpersonation.tsx   |   4 +-
 .../GoogleWorkspaceInviteButton.tsx           |   4 +-
 .../components/MakeTeamPrivateSwitch.tsx      |   2 +-
 .../components/MemberInvitationModal.tsx      |   4 +-
 .../components/TeamAvailabilityTimes.tsx      |  10 +-
 .../ee/teams/components/TeamInviteList.tsx    |   2 +-
 .../teams/components/TeamInviteListItem.tsx   |   2 +-
 .../features/ee/teams/components/TeamList.tsx |   2 +-
 .../ee/teams/components/TeamListItem.tsx      |   6 +-
 .../ee/teams/components/TeamsListing.tsx      |  10 +-
 .../ee/teams/pages/team-appearance-view.tsx   |  22 +-
 .../ee/teams/pages/team-members-view.tsx      |  27 +-
 .../ee/teams/pages/team-profile-view.tsx      |  23 +-
 .../ee/users/components/UsersTable.tsx        |   3 +-
 .../features/ee/users/server/trpc-router.ts   |   4 +-
 .../ee/video/ViewRecordingsDialog.tsx         |  19 +-
 .../ee/workflows/components/DeleteDialog.tsx  |   2 +-
 .../ee/workflows/components/EmptyScreen.tsx   |   2 +-
 .../components/EventWorkflowsTab.tsx          |   8 +-
 .../components/WorkflowDetailsPage.tsx        |   4 +-
 .../components/WorkflowStepContainer.tsx      |   2 +-
 .../features/ee/workflows/pages/index.tsx     |   4 +-
 .../features/ee/workflows/pages/workflow.tsx  |   8 +-
 packages/features/embed/Embed.tsx             |   2 +-
 .../BulkEditDefaultConferencingModal.tsx      |   2 +-
 .../components/CreateEventTypeDialog.tsx      |   2 +-
 .../eventtypes/components/DuplicateDialog.tsx |   2 +-
 .../filters/components/FilterResults.tsx      |   4 +-
 packages/features/flags/context/provider.ts   |   2 +-
 packages/features/flags/hooks/index.ts        |  12 +-
 packages/features/flags/server/utils.ts       |   4 +-
 .../components/AverageEventDurationChart.tsx  |   4 +-
 .../insights/components/BookingKPICards.tsx   |   4 +-
 .../components/BookingStatusLineChart.tsx     |   4 +-
 .../LeastBookedTeamMembersTable.tsx           |   4 +-
 .../components/MostBookedTeamMembersTable.tsx |   4 +-
 .../components/PopularEventsTable.tsx         |   4 +-
 .../insights/filters/Download/index.tsx       |   4 +-
 .../features/insights/server/trpc-router.ts   |  25 +-
 .../components/NewScheduleButton.tsx          |   2 +-
 .../schedules/components/ScheduleListItem.tsx |   4 +-
 .../settings/BookerLayoutSelector.tsx         |   2 +-
 .../settings/TimezoneChangeDialog.tsx         |   6 +-
 packages/features/shell/Shell.tsx             |   4 +-
 packages/features/shell/TeamInviteBadge.tsx   |   4 +-
 .../components/AvailabilityEditSheet.tsx      |   8 +-
 .../components/AvailabilitySliderTable.tsx    |   7 +-
 packages/features/tips/UpgradeTip.tsx         |   6 +-
 .../components/CalendarToggleContainer.tsx    |   4 +-
 .../components/EventTypeSelect.tsx            |   4 +-
 .../UserTable/BulkActions/DeleteBulkUsers.tsx |   2 +-
 .../UserTable/BulkActions/TeamList.tsx        |   2 +-
 .../UserTable/EditSheet/EditUserSheet.tsx     |   8 +-
 .../EditSheet/SheetFooterControls.tsx         |   4 +-
 .../UserTable/InviteMemberModal.tsx           |   2 +-
 .../components/UserTable/UserListTable.tsx    |  11 +-
 .../components/WebhookTestDisclosure.tsx      |   2 +-
 .../webhooks/pages/webhook-edit-view.tsx      |   4 +-
 .../webhooks/pages/webhook-new-view.tsx       |   4 +-
 .../features/webhooks/pages/webhooks-view.tsx |   4 +-
 packages/lib/getLocaleFromRequest.ts          |   3 +-
 packages/lib/hooks/useHasPaidPlan.ts          |  20 +-
 packages/trpc/client/links/httpBatchLink.ts   |   1 -
 packages/trpc/client/links/httpLink.ts        |   1 -
 packages/trpc/client/links/loggerLink.ts      |   1 -
 packages/trpc/client/links/splitLink.ts       |   1 -
 packages/trpc/package.json                    |  10 +-
 packages/trpc/react/server.ts                 |   1 +
 packages/trpc/react/ssg.ts                    |   1 -
 packages/trpc/react/trpc.ts                   |  14 +-
 packages/trpc/server/createContext.ts         |   8 +-
 packages/trpc/server/createNextApiHandler.ts  |   4 +-
 .../server/middlewares/sessionMiddleware.ts   |   9 +-
 packages/ui/components/apps/AppCard.tsx       |   4 +-
 packages/ui/components/avatar/Avatar.tsx      |   4 +-
 .../components/createButton/CreateButton.tsx  |   8 +-
 .../__storybook__/datatable.stories.mdx       |   2 +-
 packages/ui/components/data-table/index.tsx   |   6 +-
 .../dialog/ConfirmationDialogContent.tsx      |  10 +-
 .../form/timezone-select/TimezoneSelect.tsx   |   6 +-
 .../timezoneSelect.stories.mdx                |   2 +-
 .../ui/components/form/wizard/WizardForm.tsx  |  12 +-
 .../form/wizard/wizardForm.test.tsx           |   4 +-
 packages/ui/form/PhoneInput.tsx               |  11 +-
 packages/ui/package.json                      |   2 +-
 yarn.lock                                     | 595 +++++++++++-------
 183 files changed, 1203 insertions(+), 1013 deletions(-)
 delete mode 100644 packages/trpc/client/links/httpBatchLink.ts
 delete mode 100644 packages/trpc/client/links/httpLink.ts
 delete mode 100644 packages/trpc/client/links/loggerLink.ts
 delete mode 100644 packages/trpc/client/links/splitLink.ts
 create mode 100644 packages/trpc/react/server.ts
 delete mode 100644 packages/trpc/react/ssg.ts

diff --git a/apps/web/app/_trpc/createHydrateClient.tsx b/apps/web/app/_trpc/createHydrateClient.tsx
index a281737896..6751a02162 100644
--- a/apps/web/app/_trpc/createHydrateClient.tsx
+++ b/apps/web/app/_trpc/createHydrateClient.tsx
@@ -1,11 +1,16 @@
 "use client";
 
-import { type DehydratedState, Hydrate } from "@tanstack/react-query";
+import { type DehydratedState, HydrationBoundary } from "@tanstack/react-query";
 import { useMemo } from "react";
 
-import type { DataTransformer } from "@trpc/server";
+type DataTransformer = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  serialize: (data: any) => any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  deserialize: (data: any) => any;
+};
 
-export function createHydrateClient(opts: { transformer?: DataTransformer }) {
+export function createHydrateClient(opts: { transformer: DataTransformer }) {
   return function HydrateClient(props: { children: React.ReactNode; state: DehydratedState }) {
     const { state, children } = props;
 
@@ -16,6 +21,6 @@ export function createHydrateClient(opts: { transformer?: DataTransformer }) {
       return state;
     }, [state]);
 
-    return <Hydrate state={transformedState}>{children}</Hydrate>;
+    return <HydrationBoundary state={transformedState}>{children}</HydrationBoundary>;
   };
 }
diff --git a/apps/web/app/_trpc/trpc-provider.tsx b/apps/web/app/_trpc/trpc-provider.tsx
index 6e81d2996a..45100bd89f 100644
--- a/apps/web/app/_trpc/trpc-provider.tsx
+++ b/apps/web/app/_trpc/trpc-provider.tsx
@@ -4,10 +4,7 @@ import { trpc } from "app/_trpc/client";
 import { useState } from "react";
 import superjson from "superjson";
 
-import { httpBatchLink } from "@calcom/trpc/client/links/httpBatchLink";
-import { httpLink } from "@calcom/trpc/client/links/httpLink";
-import { loggerLink } from "@calcom/trpc/client/links/loggerLink";
-import { splitLink } from "@calcom/trpc/client/links/splitLink";
+import { httpBatchLink, httpLink, loggerLink, splitLink } from "@calcom/trpc/client";
 import { ENDPOINTS } from "@calcom/trpc/react/shared";
 
 export type Endpoint = (typeof ENDPOINTS)[number];
diff --git a/apps/web/components/apps/AdditionalCalendarSelector.tsx b/apps/web/components/apps/AdditionalCalendarSelector.tsx
index 6fdd24ad9e..bcc42267c9 100644
--- a/apps/web/components/apps/AdditionalCalendarSelector.tsx
+++ b/apps/web/components/apps/AdditionalCalendarSelector.tsx
@@ -16,10 +16,10 @@ import { Plus } from "@calcom/ui/components/icon";
 import { QueryCell } from "@lib/QueryCell";
 
 interface AdditionalCalendarSelectorProps {
-  isLoading?: boolean;
+  isPending?: boolean;
 }
 
-const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorProps): JSX.Element | null => {
+const AdditionalCalendarSelector = ({ isPending }: AdditionalCalendarSelectorProps): JSX.Element | null => {
   const { t } = useLocale();
   const query = trpc.viewer.integrations.useQuery({ variant: "calendar", onlyInstalled: true });
 
@@ -42,7 +42,7 @@ const AdditionalCalendarSelector = ({ isLoading }: AdditionalCalendarSelectorPro
         return (
           <Dropdown modal={false}>
             <DropdownMenuTrigger asChild>
-              <Button StartIcon={Plus} color="secondary" {...(isLoading && { loading: isLoading })}>
+              <Button StartIcon={Plus} color="secondary" {...(isPending && { loading: isPending })}>
                 {t("add")}
               </Button>
             </DropdownMenuTrigger>
diff --git a/apps/web/components/apps/AppPage.tsx b/apps/web/components/apps/AppPage.tsx
index c6a35e9749..5b227dd443 100644
--- a/apps/web/components/apps/AppPage.tsx
+++ b/apps/web/components/apps/AppPage.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import type { IframeHTMLAttributes } from "react";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 
 import useAddAppMutation from "@calcom/app-store/_utils/useAddAppMutation";
 import { AppDependencyComponent, InstallAppButton } from "@calcom/app-store/components";
@@ -92,17 +92,19 @@ export const AppPage = ({
   const [existingCredentials, setExistingCredentials] = useState<number[]>([]);
   const [showDisconnectIntegration, setShowDisconnectIntegration] = useState(false);
 
-  const appDbQuery = trpc.viewer.appCredentialsByType.useQuery(
-    { appType: type },
-    {
-      onSettled(data) {
-        const credentialsCount = data?.credentials.length || 0;
-        setShowDisconnectIntegration(
-          data?.userAdminTeams.length ? credentialsCount >= data?.userAdminTeams.length : credentialsCount > 0
-        );
-        setExistingCredentials(data?.credentials.map((credential) => credential.id) || []);
-      },
-    }
+  const appDbQuery = trpc.viewer.appCredentialsByType.useQuery({ appType: type });
+
+  useEffect(
+    function refactorMeWithoutEffect() {
+      const data = appDbQuery.data;
+
+      const credentialsCount = data?.credentials.length || 0;
+      setShowDisconnectIntegration(
+        data?.userAdminTeams.length ? credentialsCount >= data?.userAdminTeams.length : credentialsCount > 0
+      );
+      setExistingCredentials(data?.credentials.map((credential) => credential.id) || []);
+    },
+    [appDbQuery.data]
   );
 
   const dependencyData = trpc.viewer.appsRouter.queryForDependencies.useQuery(dependencies, {
@@ -190,7 +192,7 @@ export const AppPage = ({
             )}
           </header>
         </div>
-        {!appDbQuery.isLoading ? (
+        {!appDbQuery.isPending ? (
           isGlobal ||
           (existingCredentials.length > 0 && allowedMultipleInstalls ? (
             <div className="flex space-x-3">
@@ -211,7 +213,7 @@ export const AppPage = ({
                         onClick: () => {
                           mutation.mutate({ type, variant, slug });
                         },
-                        loading: mutation.isLoading,
+                        loading: mutation.isPending,
                       };
                     }
                     return (
@@ -250,7 +252,7 @@ export const AppPage = ({
                     onClick: () => {
                       mutation.mutate({ type, variant, slug });
                     },
-                    loading: mutation.isLoading,
+                    loading: mutation.isPending,
                   };
                 }
                 return (
@@ -272,7 +274,7 @@ export const AppPage = ({
         )}
 
         {dependencies &&
-          (!dependencyData.isLoading ? (
+          (!dependencyData.isPending ? (
             <div className="mt-6">
               <AppDependencyComponent appName={name} dependencyData={dependencyData.data} />
             </div>
diff --git a/apps/web/components/apps/CalendarListContainer.tsx b/apps/web/components/apps/CalendarListContainer.tsx
index 5a771af6ec..61082a39fa 100644
--- a/apps/web/components/apps/CalendarListContainer.tsx
+++ b/apps/web/components/apps/CalendarListContainer.tsx
@@ -28,7 +28,7 @@ type Props = {
   onChanged: () => unknown | Promise<unknown>;
   fromOnboarding?: boolean;
   destinationCalendarId?: string;
-  isLoading?: boolean;
+  isPending?: boolean;
 };
 
 function CalendarList(props: Props) {
@@ -74,7 +74,7 @@ function ConnectedCalendarsList(props: Props) {
     suspense: true,
     refetchOnWindowFocus: false,
   });
-  const { fromOnboarding, isLoading } = props;
+  const { fromOnboarding, isPending } = props;
   return (
     <QueryCell
       query={query}
@@ -97,7 +97,7 @@ function ConnectedCalendarsList(props: Props) {
                 <div className="flex flex-col xl:flex-row xl:space-x-5">
                   {!!data.connectedCalendars.length && (
                     <div className="flex items-center">
-                      <AdditionalCalendarSelector isLoading={isLoading} />
+                      <AdditionalCalendarSelector isPending={isPending} />
                     </div>
                   )}
                 </div>
@@ -229,7 +229,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                               hidePlaceholder
                               value={data.destinationCalendar?.externalId}
                               onChange={mutation.mutate}
-                              isLoading={mutation.isLoading}
+                              isPending={mutation.isPending}
                             />
                           </div>
                         </div>
@@ -239,7 +239,7 @@ export function CalendarListContainer(props: { heading?: boolean; fromOnboarding
                       onChanged={onChanged}
                       fromOnboarding={fromOnboarding}
                       destinationCalendarId={data.destinationCalendar?.externalId}
-                      isLoading={mutation.isLoading}
+                      isPending={mutation.isPending}
                     />
                   </>
                 )}
diff --git a/apps/web/components/apps/InstallAppButtonChild.tsx b/apps/web/components/apps/InstallAppButtonChild.tsx
index 120a0188d8..90eb9361ad 100644
--- a/apps/web/components/apps/InstallAppButtonChild.tsx
+++ b/apps/web/components/apps/InstallAppButtonChild.tsx
@@ -100,9 +100,9 @@ export const InstallAppButtonChild = ({
         <DropdownMenuContent
           className="w-auto"
           onInteractOutside={(event) => {
-            if (mutation.isLoading) event.preventDefault();
+            if (mutation.isPending) event.preventDefault();
           }}>
-          {mutation.isLoading && (
+          {mutation.isPending && (
             <div className="z-1 fixed inset-0 flex items-center justify-center">
               <Spinner />
             </div>
diff --git a/apps/web/components/booking/BookingListItem.tsx b/apps/web/components/booking/BookingListItem.tsx
index e58c7dc98a..265587ddaa 100644
--- a/apps/web/components/booking/BookingListItem.tsx
+++ b/apps/web/components/booking/BookingListItem.tsx
@@ -139,7 +139,7 @@ function BookingListItem(booking: BookingItemProps) {
         setRejectionDialogIsOpen(true);
       },
       icon: Ban,
-      disabled: mutation.isLoading,
+      disabled: mutation.isPending,
     },
     // For bookings with payment, only confirm if the booking is paid for
     ...((isPending && !paymentAppData.enabled) ||
@@ -153,7 +153,7 @@ function BookingListItem(booking: BookingItemProps) {
               bookingConfirm(true);
             },
             icon: Check,
-            disabled: mutation.isLoading,
+            disabled: mutation.isPending,
           },
         ]
       : []),
@@ -293,7 +293,7 @@ function BookingListItem(booking: BookingItemProps) {
         setViewRecordingsDialogIsOpen(true);
       },
       color: showCheckRecordingButton ? "secondary" : "primary",
-      disabled: mutation.isLoading,
+      disabled: mutation.isPending,
     },
   ];
 
@@ -348,7 +348,7 @@ function BookingListItem(booking: BookingItemProps) {
           <DialogFooter>
             <DialogClose />
             <Button
-              disabled={mutation.isLoading}
+              disabled={mutation.isPending}
               data-testid="rejection-confirm"
               onClick={() => {
                 bookingConfirm(false);
diff --git a/apps/web/components/dialog/ChargeCardDialog.tsx b/apps/web/components/dialog/ChargeCardDialog.tsx
index 6aa3eb086a..193c74b053 100644
--- a/apps/web/components/dialog/ChargeCardDialog.tsx
+++ b/apps/web/components/dialog/ChargeCardDialog.tsx
@@ -65,7 +65,7 @@ export const ChargeCardDialog = (props: IRescheduleDialog) => {
               <DialogClose />
               <Button
                 data-testid="send_request"
-                disabled={chargeCardMutation.isLoading || chargeError}
+                disabled={chargeCardMutation.isPending || chargeError}
                 onClick={() =>
                   chargeCardMutation.mutate({
                     bookingId,
diff --git a/apps/web/components/dialog/RescheduleDialog.tsx b/apps/web/components/dialog/RescheduleDialog.tsx
index 1dd00cec3a..ec2115b5ec 100644
--- a/apps/web/components/dialog/RescheduleDialog.tsx
+++ b/apps/web/components/dialog/RescheduleDialog.tsx
@@ -27,7 +27,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
   const { isOpenDialog, setIsOpenDialog, bookingUId: bookingId } = props;
   const [rescheduleReason, setRescheduleReason] = useState("");
 
-  const { mutate: rescheduleApi, isLoading } = trpc.viewer.bookings.requestReschedule.useMutation({
+  const { mutate: rescheduleApi, isPending } = trpc.viewer.bookings.requestReschedule.useMutation({
     async onSuccess() {
       showToast(t("reschedule_request_sent"), "success");
       setIsOpenDialog(false);
@@ -65,7 +65,7 @@ export const RescheduleDialog = (props: IRescheduleDialog) => {
               <DialogClose />
               <Button
                 data-testid="send_request"
-                disabled={isLoading}
+                disabled={isPending}
                 onClick={() => {
                   rescheduleApi({
                     bookingId,
diff --git a/apps/web/components/eventtype/EventAppsTab.tsx b/apps/web/components/eventtype/EventAppsTab.tsx
index 6fa09878af..76f02af117 100644
--- a/apps/web/components/eventtype/EventAppsTab.tsx
+++ b/apps/web/components/eventtype/EventAppsTab.tsx
@@ -18,7 +18,7 @@ export type EventType = Pick<EventTypeSetupProps, "eventType">["eventType"] &
 
 export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
   const { t } = useLocale();
-  const { data: eventTypeApps, isLoading } = trpc.viewer.integrations.useQuery({
+  const { data: eventTypeApps, isPending } = trpc.viewer.integrations.useQuery({
     extendsFeature: "EventType",
     teamId: eventType.team?.id || eventType.parent?.teamId,
   });
@@ -138,7 +138,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
               message={t("locked_apps_description")}
             />
           )}
-          {!isLoading && !installedApps?.length ? (
+          {!isPending && !installedApps?.length ? (
             <EmptyScreen
               Icon={Grid}
               headline={t("empty_installed_apps_headline")}
@@ -179,7 +179,7 @@ export const EventAppsTab = ({ eventType }: { eventType: EventType }) => {
       </div>
       {!shouldLockDisableProps("apps").disabled && (
         <div className="bg-muted mt-6 rounded-md p-8">
-          {!isLoading && notInstalledApps?.length ? (
+          {!isPending && notInstalledApps?.length ? (
             <>
               <h2 className="text-emphasis mb-2 text-xl font-semibold leading-5 tracking-[0.01em]">
                 {t("available_apps_lower_case")}
diff --git a/apps/web/components/eventtype/EventAvailabilityTab.tsx b/apps/web/components/eventtype/EventAvailabilityTab.tsx
index caf04147de..de6dc35fbf 100644
--- a/apps/web/components/eventtype/EventAvailabilityTab.tsx
+++ b/apps/web/components/eventtype/EventAvailabilityTab.tsx
@@ -85,7 +85,7 @@ const EventTypeScheduleDetails = memo(
     const { watch } = useFormContext<FormValues>();
 
     const scheduleId = watch("schedule");
-    const { isLoading, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
+    const { isPending, data: schedule } = trpc.viewer.availability.schedule.get.useQuery(
       {
         scheduleId:
           scheduleId || loggedInUser?.defaultScheduleId || selectedScheduleValue?.value || undefined,
@@ -112,7 +112,7 @@ const EventTypeScheduleDetails = memo(
                     )}>
                     {day}
                   </span>
-                  {isLoading ? (
+                  {isPending ? (
                     <SkeletonText className="block h-5 w-60" />
                   ) : isAvailable ? (
                     <div className="space-y-3 text-right">
@@ -142,7 +142,7 @@ const EventTypeScheduleDetails = memo(
           {!!schedule?.id && !schedule.isManaged && !schedule.readOnly && (
             <Button
               href={`/availability/${schedule.id}`}
-              disabled={isLoading}
+              disabled={isPending}
               color="minimal"
               EndIcon={ExternalLink}
               target="_blank"
@@ -169,8 +169,15 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
   const watchSchedule = watch("schedule");
   const [options, setOptions] = useState<AvailabilityOption[]>([]);
 
-  const { isLoading } = trpc.viewer.availability.list.useQuery(undefined, {
-    onSuccess: ({ schedules }) => {
+  const { data, isPending } = trpc.viewer.availability.list.useQuery(undefined);
+
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (!data) {
+        return;
+      }
+      const schedules = data.schedules;
+
       const options = schedules.map((schedule) => ({
         value: schedule.id,
         label: schedule.name,
@@ -225,8 +232,8 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
 
       setValue("availability", value);
     },
-  });
-
+    [data]
+  );
   const availabilityValue = watch("availability");
 
   useEffect(() => {
@@ -241,8 +248,8 @@ const EventTypeSchedule = ({ eventType }: { eventType: EventTypeSetup }) => {
           {t("availability")}
           {shouldLockIndicator("availability")}
         </label>
-        {isLoading && <SelectSkeletonLoader />}
-        {!isLoading && (
+        {isPending && <SelectSkeletonLoader />}
+        {!isPending && (
           <Controller
             name="schedule"
             render={({ field }) => {
diff --git a/apps/web/components/eventtype/EventTypeSingleLayout.tsx b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
index 750f0bed44..6d61a73bd0 100644
--- a/apps/web/components/eventtype/EventTypeSingleLayout.tsx
+++ b/apps/web/components/eventtype/EventTypeSingleLayout.tsx
@@ -446,7 +446,7 @@ function EventTypeSingleLayout({
       </Suspense>
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <ConfirmationDialogContent
-          isLoading={deleteMutation.isLoading}
+          isPending={deleteMutation.isPending}
           variety="danger"
           title={t(`delete${isManagedEvent}_event_type`)}
           confirmBtnText={t(`confirm_delete_event_type`)}
diff --git a/apps/web/components/eventtype/EventWebhooksTab.tsx b/apps/web/components/eventtype/EventWebhooksTab.tsx
index 442fd68cdb..9a929bc4f5 100644
--- a/apps/web/components/eventtype/EventWebhooksTab.tsx
+++ b/apps/web/components/eventtype/EventWebhooksTab.tsx
@@ -23,7 +23,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
 
   const { data: webhooks } = trpc.viewer.webhook.list.useQuery({ eventTypeId: eventType.id });
 
-  const { data: installedApps, isLoading } = trpc.viewer.integrations.useQuery({
+  const { data: installedApps, isPending } = trpc.viewer.integrations.useQuery({
     variant: "other",
     onlyInstalled: true,
   });
@@ -103,7 +103,7 @@ export const EventWebhooksTab = ({ eventType }: Pick<EventTypeSetupProps, "event
 
   return (
     <div>
-      {webhooks && !isLoading && (
+      {webhooks && !isPending && (
         <>
           <div>
             <div>
diff --git a/apps/web/components/eventtype/InstantEventController.tsx b/apps/web/components/eventtype/InstantEventController.tsx
index bff93027ab..d3ad1d7355 100644
--- a/apps/web/components/eventtype/InstantEventController.tsx
+++ b/apps/web/components/eventtype/InstantEventController.tsx
@@ -108,7 +108,7 @@ const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) =>
     eventTypeId: eventType.id,
     eventTriggers: [WebhookTriggerEvents.INSTANT_MEETING],
   });
-  const { data: installedApps, isLoading } = trpc.viewer.integrations.useQuery({
+  const { data: installedApps, isPending } = trpc.viewer.integrations.useQuery({
     variant: "other",
     onlyInstalled: true,
   });
@@ -188,7 +188,7 @@ const InstantMeetingWebhooks = ({ eventType }: { eventType: EventTypeSetup }) =>
 
   return (
     <div>
-      {webhooks && !isLoading && (
+      {webhooks && !isPending && (
         <>
           <div>
             {webhooks.length ? (
diff --git a/apps/web/components/eventtype/ManagedEventDialog.tsx b/apps/web/components/eventtype/ManagedEventDialog.tsx
index 614ba4a200..a9057b26bc 100644
--- a/apps/web/components/eventtype/ManagedEventDialog.tsx
+++ b/apps/web/components/eventtype/ManagedEventDialog.tsx
@@ -8,18 +8,18 @@ interface ManagedEventDialogProps {
   slugExistsChildrenDialogOpen: ChildrenEventType[];
   slug: string;
   onOpenChange: () => void;
-  isLoading: boolean;
+  isPending: boolean;
   onConfirm: (e: { preventDefault: () => void }) => void;
 }
 
 export default function ManagedEventDialog(props: ManagedEventDialogProps) {
   const { t } = useLocale();
-  const { slugExistsChildrenDialogOpen, slug, onOpenChange, isLoading, onConfirm } = props;
+  const { slugExistsChildrenDialogOpen, slug, onOpenChange, isPending, onConfirm } = props;
 
   return (
     <Dialog open={slugExistsChildrenDialogOpen.length > 0} onOpenChange={onOpenChange}>
       <ConfirmationDialogContent
-        isLoading={isLoading}
+        isPending={isPending}
         variety="warning"
         title={t("managed_event_dialog_title", {
           slug,
diff --git a/apps/web/components/getting-started/components/AppConnectionItem.tsx b/apps/web/components/getting-started/components/AppConnectionItem.tsx
index 9431679c63..cdaf308ee6 100644
--- a/apps/web/components/getting-started/components/AppConnectionItem.tsx
+++ b/apps/web/components/getting-started/components/AppConnectionItem.tsx
@@ -28,7 +28,7 @@ const AppConnectionItem = (props: IAppConnectionItem) => {
             color="secondary"
             disabled={installed}
             type="button"
-            loading={buttonProps?.isLoading}
+            loading={buttonProps?.isPending}
             onClick={(event) => {
               // Save cookie key to return url step
               document.cookie = `return-to=${window.location.href};path=/;max-age=3600;SameSite=Lax`;
diff --git a/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx b/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
index abcf37ef6e..0a430b82db 100644
--- a/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
+++ b/apps/web/components/getting-started/steps-views/ConnectCalendars.tsx
@@ -31,7 +31,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
   return (
     <>
       {/* Already connected calendars  */}
-      {!queryConnectedCalendars.isLoading &&
+      {!queryConnectedCalendars.isPending &&
         firstCalendar &&
         firstCalendar.integration &&
         firstCalendar.integration.title &&
@@ -76,7 +76,7 @@ const ConnectedCalendars = (props: IConnectCalendarsProps) => {
         </List>
       )}
 
-      {queryIntegrations.isLoading && <StepConnectionLoader />}
+      {queryIntegrations.isPending && <StepConnectionLoader />}
 
       <button
         type="button"
diff --git a/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx b/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
index ad5072dcb4..9bbdb2b589 100644
--- a/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
+++ b/apps/web/components/getting-started/steps-views/ConnectedVideoStep.tsx
@@ -13,7 +13,7 @@ interface ConnectedAppStepProps {
 
 const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
   const { nextStep } = props;
-  const { data: queryConnectedVideoApps, isLoading } = trpc.viewer.integrations.useQuery({
+  const { data: queryConnectedVideoApps, isPending } = trpc.viewer.integrations.useQuery({
     variant: "conferencing",
     onlyInstalled: false,
     sortByMostPopular: true,
@@ -26,7 +26,7 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
 
   return (
     <>
-      {!isLoading && (
+      {!isPending && (
         <List className="bg-default  border-subtle divide-subtle scroll-bar mx-1 max-h-[45vh] divide-y !overflow-y-scroll rounded-md border p-0 sm:mx-0">
           {queryConnectedVideoApps?.items &&
             queryConnectedVideoApps?.items.map((item) => {
@@ -48,7 +48,7 @@ const ConnectedVideoStep = (props: ConnectedAppStepProps) => {
         </List>
       )}
 
-      {isLoading && <StepConnectionLoader />}
+      {isPending && <StepConnectionLoader />}
       <button
         type="button"
         data-testid="save-video-button"
diff --git a/apps/web/components/getting-started/steps-views/UserSettings.tsx b/apps/web/components/getting-started/steps-views/UserSettings.tsx
index cfb49a89f8..f74d011c57 100644
--- a/apps/web/components/getting-started/steps-views/UserSettings.tsx
+++ b/apps/web/components/getting-started/steps-views/UserSettings.tsx
@@ -113,7 +113,7 @@ const UserSettings = (props: IUserSettingsProps) => {
       <Button
         type="submit"
         className="mt-8 flex w-full flex-row justify-center"
-        disabled={mutation.isLoading}>
+        disabled={mutation.isPending}>
         {t("next_step_text")}
         <ArrowRight className="ml-2 h-4 w-4 self-center" aria-hidden="true" />
       </Button>
diff --git a/apps/web/components/setup/StepDone.tsx b/apps/web/components/setup/StepDone.tsx
index da0e67d42d..9a2ccb73f6 100644
--- a/apps/web/components/setup/StepDone.tsx
+++ b/apps/web/components/setup/StepDone.tsx
@@ -7,7 +7,7 @@ import { Check } from "@calcom/ui/components/icon";
 const StepDone = (props: {
   currentStep: number;
   nextStepPath: string;
-  setIsLoading: Dispatch<SetStateAction<boolean>>;
+  setIsPending: Dispatch<SetStateAction<boolean>>;
 }) => {
   const router = useRouter();
   const { t } = useLocale();
@@ -18,7 +18,7 @@ const StepDone = (props: {
       name={`wizard-step-${props.currentStep}`}
       className="flex justify-center space-y-4"
       onSubmit={(e) => {
-        props.setIsLoading(true);
+        props.setIsPending(true);
         e.preventDefault();
         router.replace(props.nextStepPath);
       }}>
diff --git a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
index 8f746a1726..807f83d045 100644
--- a/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/PremiumTextfield.tsx
@@ -293,7 +293,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
             {usernameChangeCondition === UsernameChangeStatusEnum.UPGRADE && (
               <Button
                 type="button"
-                loading={updateUsername.isLoading}
+                loading={updateUsername.isPending}
                 data-testid="go-to-billing"
                 href={paymentLink}>
                 <>
@@ -305,7 +305,7 @@ const PremiumTextfield = (props: ICustomUsernameProps) => {
             {usernameChangeCondition !== UsernameChangeStatusEnum.UPGRADE && (
               <Button
                 type="button"
-                loading={updateUsername.isLoading}
+                loading={updateUsername.isPending}
                 data-testid="save-username"
                 onClick={() => {
                   saveUsername();
diff --git a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
index 1fe59a916b..e0b8c289ce 100644
--- a/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
+++ b/apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx
@@ -177,7 +177,7 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
           <DialogFooter className="mt-4">
             <Button
               type="button"
-              loading={updateUsernameMutation.isLoading}
+              loading={updateUsernameMutation.isPending}
               data-testid="save-username"
               onClick={updateUsername}>
               {t("save")}
diff --git a/apps/web/lib/QueryCell.tsx b/apps/web/lib/QueryCell.tsx
index be7ede4263..cfc2fbbb5f 100644
--- a/apps/web/lib/QueryCell.tsx
+++ b/apps/web/lib/QueryCell.tsx
@@ -1,21 +1,15 @@
 import type {
-  QueryObserverLoadingErrorResult,
-  QueryObserverLoadingResult,
+  QueryObserverPendingResult,
   QueryObserverRefetchErrorResult,
   QueryObserverSuccessResult,
+  QueryObserverLoadingErrorResult,
   UseQueryResult,
 } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import type { TRPCClientErrorLike } from "@calcom/trpc/client";
-import type { DecorateProcedure } from "@calcom/trpc/react/shared";
-import type { AnyQueryProcedure, inferProcedureInput, inferProcedureOutput } from "@calcom/trpc/server";
-import type { AppRouter } from "@calcom/trpc/server/routers/_app";
 import { Alert, Loader } from "@calcom/ui";
 
-import type { UseTRPCQueryOptions } from "@trpc/react-query/shared";
-
 type ErrorLike = {
   message: string;
 };
@@ -27,7 +21,7 @@ interface QueryCellOptionsBase<TData, TError extends ErrorLike> {
   error?: (
     query: QueryObserverLoadingErrorResult<TData, TError> | QueryObserverRefetchErrorResult<TData, TError>
   ) => JSXElementOrNull;
-  loading?: (query: QueryObserverLoadingResult<TData, TError> | null) => JSXElementOrNull;
+  loading?: (query: QueryObserverPendingResult<TData, TError> | null) => JSXElementOrNull;
 }
 
 interface QueryCellOptionsNoEmpty<TData, TError extends ErrorLike>
@@ -58,8 +52,11 @@ export function QueryCell<TData, TError extends ErrorLike>(
   const { isLocaleReady } = useLocale();
   const StatusLoader = opts.customLoader || <Loader />; // Fixes edge case where this can return null form query cell
 
-  if (query.status === "loading" || !isLocaleReady) {
-    return opts.loading?.(query.status === "loading" ? query : null) ?? StatusLoader;
+  if (!isLocaleReady) {
+    return opts.loading?.(query.status === "pending" ? query : null) ?? StatusLoader;
+  }
+  if (query.status === "pending") {
+    return opts.loading?.(query) ?? StatusLoader;
   }
 
   if (query.status === "success") {
@@ -81,28 +78,3 @@ export function QueryCell<TData, TError extends ErrorLike>(
   // impossible state
   return null;
 }
-
-type TError = TRPCClientErrorLike<AppRouter>;
-
-const withQuery = <
-  TQuery extends AnyQueryProcedure,
-  TInput = inferProcedureInput<TQuery>,
-  TOutput = inferProcedureOutput<TQuery>
->(
-  queryProcedure: DecorateProcedure<TQuery, inferProcedureInput<TQuery>, inferProcedureOutput<TQuery>>,
-
-  input?: TInput,
-  params?: UseTRPCQueryOptions<TQuery, TInput, TOutput, TOutput, TError>
-) => {
-  return function WithQuery(
-    opts: Omit<
-      Partial<QueryCellOptionsWithEmpty<TOutput, TError>> & QueryCellOptionsNoEmpty<TOutput, TError>,
-      "query"
-    >
-  ) {
-    const query = queryProcedure.useQuery(input, params);
-    return <QueryCell query={query} {...opts} />;
-  };
-};
-
-export { withQuery };
diff --git a/apps/web/package.json b/apps/web/package.json
index 2b2dad2c86..c3fa337875 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -60,7 +60,7 @@
     "@sentry/nextjs": "^7.73.0",
     "@stripe/react-stripe-js": "^1.10.0",
     "@stripe/stripe-js": "^1.35.0",
-    "@tanstack/react-query": "^4.3.9",
+    "@tanstack/react-query": "^5.17.15",
     "@tremor/react": "^2.0.0",
     "@types/turndown": "^5.0.1",
     "@upstash/ratelimit": "^0.4.3",
diff --git a/apps/web/pages/auth/login.tsx b/apps/web/pages/auth/login.tsx
index b75304603e..61afdd6de6 100644
--- a/apps/web/pages/auth/login.tsx
+++ b/apps/web/pages/auth/login.tsx
@@ -5,7 +5,7 @@ import classNames from "classnames";
 import { signIn } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { FormProvider, useForm } from "react-hook-form";
 import { FaGoogle } from "react-icons/fa";
 import { z } from "zod";
@@ -157,15 +157,20 @@ inferSSRProps<typeof getServerSideProps> & WithNonceProps<{}>) {
     else setErrorMessage(errorMessages[res.error] || t("something_went_wrong"));
   };
 
-  const { data, isLoading } = trpc.viewer.public.ssoConnections.useQuery(undefined, {
-    onError: (err) => {
-      setErrorMessage(err.message);
+  const { data, isPending, error } = trpc.viewer.public.ssoConnections.useQuery();
+
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (error) {
+        setErrorMessage(error.message);
+      }
     },
-  });
+    [error]
+  );
 
   const displaySSOLogin = HOSTED_CAL_FEATURES
     ? true
-    : isSAMLLoginEnabled && !isLoading && data?.connectionExists;
+    : isSAMLLoginEnabled && !isPending && data?.connectionExists;
 
   return (
     <div className="dark:bg-brand dark:text-brand-contrast text-emphasis min-h-screen [--cal-brand-emphasis:#101010] [--cal-brand-subtle:#9CA3AF] [--cal-brand-text:white] [--cal-brand:#111827] dark:[--cal-brand-emphasis:#e1e1e1] dark:[--cal-brand-text:black] dark:[--cal-brand:white]">
diff --git a/apps/web/pages/auth/oauth2/authorize.tsx b/apps/web/pages/auth/oauth2/authorize.tsx
index 502912440c..d63af3dd1c 100644
--- a/apps/web/pages/auth/oauth2/authorize.tsx
+++ b/apps/web/pages/auth/oauth2/authorize.tsx
@@ -28,7 +28,7 @@ export default function Authorize() {
   const [selectedAccount, setSelectedAccount] = useState<{ value: string; label: string } | null>();
   const scopes = scope ? scope.toString().split(",") : [];
 
-  const { data: client, isLoading: isLoadingGetClient } = trpc.viewer.oAuth.getClient.useQuery(
+  const { data: client, isPending: isPendingGetClient } = trpc.viewer.oAuth.getClient.useQuery(
     {
       clientId: client_id as string,
     },
@@ -37,7 +37,7 @@ export default function Authorize() {
     }
   );
 
-  const { data, isLoading: isLoadingProfiles } = trpc.viewer.teamsAndUserProfilesQuery.useQuery();
+  const { data, isPending: isPendingProfiles } = trpc.viewer.teamsAndUserProfilesQuery.useQuery();
 
   const generateAuthCodeMutation = trpc.viewer.oAuth.generateAuthCode.useMutation({
     onSuccess: (data) => {
@@ -58,7 +58,7 @@ export default function Authorize() {
     if (mappedProfiles.length > 0) {
       setSelectedAccount(mappedProfiles[0]);
     }
-  }, [isLoadingProfiles]);
+  }, [isPendingProfiles]);
 
   useEffect(() => {
     if (status === "unauthenticated") {
@@ -69,9 +69,9 @@ export default function Authorize() {
     }
   }, [status]);
 
-  const isLoading = isLoadingGetClient || isLoadingProfiles || status !== "authenticated";
+  const isPending = isPendingGetClient || isPendingProfiles || status !== "authenticated";
 
-  if (isLoading) {
+  if (isPending) {
     return <></>;
   }
 
diff --git a/apps/web/pages/auth/setup/index.tsx b/apps/web/pages/auth/setup/index.tsx
index cf5361f311..1b7b3826b9 100644
--- a/apps/web/pages/auth/setup/index.tsx
+++ b/apps/web/pages/auth/setup/index.tsx
@@ -41,16 +41,16 @@ export function Setup(props: inferSSRProps<typeof getServerSideProps>) {
     {
       title: t("administrator_user"),
       description: t("lets_create_first_administrator_user"),
-      content: (setIsLoading) => (
+      content: (setIsPending) => (
         <AdminUser
           onSubmit={() => {
-            setIsLoading(true);
+            setIsPending(true);
           }}
           onSuccess={() => {
             setStep(2);
           }}
           onError={() => {
-            setIsLoading(false);
+            setIsPending(false);
           }}
           userCount={props.userCount}
         />
@@ -59,7 +59,7 @@ export function Setup(props: inferSSRProps<typeof getServerSideProps>) {
     {
       title: t("choose_a_license"),
       description: t("choose_license_description"),
-      content: (setIsLoading) => {
+      content: (setIsPending) => {
         return (
           <ChooseLicense
             id="wizard-step-2"
@@ -67,7 +67,7 @@ export function Setup(props: inferSSRProps<typeof getServerSideProps>) {
             value={value}
             onChange={setValue}
             onSubmit={() => {
-              setIsLoading(true);
+              setIsPending(true);
               setStep(3);
             }}
           />
@@ -80,14 +80,14 @@ export function Setup(props: inferSSRProps<typeof getServerSideProps>) {
     steps.push({
       title: t("step_enterprise_license"),
       description: t("step_enterprise_license_description"),
-      content: (setIsLoading) => {
+      content: (setIsPending) => {
         const currentStep = 3;
         return (
           <EnterpriseLicense
             id={`wizard-step-${currentStep}`}
             name={`wizard-step-${currentStep}`}
             onSubmit={() => {
-              setIsLoading(true);
+              setIsPending(true);
             }}
             onSuccess={() => {
               setStep(currentStep + 1);
@@ -106,7 +106,7 @@ export function Setup(props: inferSSRProps<typeof getServerSideProps>) {
     title: t("enable_apps"),
     description: t("enable_apps_description", { appName: APP_NAME }),
     contentClassname: "!pb-0 mb-[-1px]",
-    content: (setIsLoading) => {
+    content: (setIsPending) => {
       const currentStep = isFreeLicense ? 3 : 4;
       return (
         <AdminAppsList
@@ -120,7 +120,7 @@ export function Setup(props: inferSSRProps<typeof getServerSideProps>) {
           baseURL={`/auth/setup?step=${currentStep}`}
           useQueryParam={true}
           onSubmit={() => {
-            setIsLoading(true);
+            setIsPending(true);
             router.replace("/");
           }}
         />
diff --git a/apps/web/pages/auth/verify-email.tsx b/apps/web/pages/auth/verify-email.tsx
index 2750dfaccd..0413303479 100644
--- a/apps/web/pages/auth/verify-email.tsx
+++ b/apps/web/pages/auth/verify-email.tsx
@@ -44,7 +44,7 @@ function VerifyEmailPage() {
               <Button
                 color="minimal"
                 className="underline"
-                loading={mutation.isLoading}
+                loading={mutation.isPending}
                 onClick={() => {
                   showToast("Send email", "success");
                   mutation.mutate();
diff --git a/apps/web/pages/availability/[schedule].tsx b/apps/web/pages/availability/[schedule].tsx
index f3502b6f9a..19f53abbc8 100644
--- a/apps/web/pages/availability/[schedule].tsx
+++ b/apps/web/pages/availability/[schedule].tsx
@@ -93,7 +93,7 @@ export default function Availability() {
   const fromEventType = searchParams?.get("fromEventType");
   const { timeFormat } = me.data || { timeFormat: null };
   const [openSidebar, setOpenSidebar] = useState(false);
-  const { data: schedule, isLoading } = trpc.viewer.availability.schedule.get.useQuery(
+  const { data: schedule, isPending } = trpc.viewer.availability.schedule.get.useQuery(
     { scheduleId },
     {
       enabled: !!scheduleId,
@@ -158,7 +158,7 @@ export default function Availability() {
           control={form.control}
           name="name"
           render={({ field }) => (
-            <EditableHeading isReady={!isLoading} {...field} data-testid="availablity-title" />
+            <EditableHeading isReady={!isPending} {...field} data-testid="availablity-title" />
           )}
         />
       }
@@ -188,7 +188,7 @@ export default function Availability() {
             </Skeleton>
             <Switch
               id="hiddenSwitch"
-              disabled={isLoading || schedule?.isDefault}
+              disabled={isPending || schedule?.isDefault}
               checked={form.watch("isDefault")}
               onCheckedChange={(e) => {
                 form.setValue("isDefault", e);
@@ -210,7 +210,7 @@ export default function Availability() {
               />
             </DialogTrigger>
             <ConfirmationDialogContent
-              isLoading={deleteMutation.isLoading}
+              isPending={deleteMutation.isPending}
               variety="danger"
               title={t("delete_schedule")}
               confirmBtnText={t("delete")}
@@ -249,7 +249,7 @@ export default function Availability() {
                     />
                   </DialogTrigger>
                   <ConfirmationDialogContent
-                    isLoading={deleteMutation.isLoading}
+                    isPending={deleteMutation.isPending}
                     variety="danger"
                     title={t("delete_schedule")}
                     confirmBtnText={t("delete")}
@@ -284,7 +284,7 @@ export default function Availability() {
                 </Skeleton>
                 <Switch
                   id="hiddenSwitch"
-                  disabled={isLoading || schedule?.isDefault}
+                  disabled={isPending || schedule?.isDefault}
                   checked={form.watch("isDefault")}
                   onCheckedChange={(e) => {
                     form.setValue("isDefault", e);
@@ -334,7 +334,7 @@ export default function Availability() {
             className="ml-4 lg:ml-0"
             type="submit"
             form="availability-form"
-            loading={updateMutation.isLoading}>
+            loading={updateMutation.isPending}>
             {t("save")}
           </Button>
           <Button
diff --git a/apps/web/pages/availability/index.tsx b/apps/web/pages/availability/index.tsx
index 97fcdb0fe2..6465f3b5cb 100644
--- a/apps/web/pages/availability/index.tsx
+++ b/apps/web/pages/availability/index.tsx
@@ -15,7 +15,7 @@ import { trpc } from "@calcom/trpc/react";
 import { EmptyScreen, showToast, ToggleGroup } from "@calcom/ui";
 import { Clock } from "@calcom/ui/components/icon";
 
-import { withQuery } from "@lib/QueryCell";
+import { QueryCell } from "@lib/QueryCell";
 
 import PageWrapper from "@components/PageWrapper";
 import SkeletonLoader from "@components/availability/SkeletonLoader";
@@ -136,8 +136,17 @@ export function AvailabilityList({ schedules }: RouterOutputs["viewer"]["availab
   );
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const WithQuery = withQuery(trpc.viewer.availability.list as any);
+function AvailabilityListWithQuery() {
+  const query = trpc.viewer.availability.list.useQuery();
+
+  return (
+    <QueryCell
+      query={query}
+      success={({ data }) => <AvailabilityList {...data} />}
+      customLoader={<SkeletonLoader />}
+    />
+  );
+}
 
 export default function AvailabilityPage() {
   const { t } = useLocale();
@@ -179,14 +188,7 @@ export default function AvailabilityPage() {
             <NewScheduleButton />
           </div>
         }>
-        {searchParams?.get("type") === "team" ? (
-          <AvailabilitySliderTable />
-        ) : (
-          <WithQuery
-            success={({ data }) => <AvailabilityList {...data} />}
-            customLoader={<SkeletonLoader />}
-          />
-        )}
+        {searchParams?.get("type") === "team" ? <AvailabilitySliderTable /> : <AvailabilityListWithQuery />}
       </ShellMain>
     </div>
   );
diff --git a/apps/web/pages/bookings/[status].tsx b/apps/web/pages/bookings/[status].tsx
index 5146f6d1a1..71aa4951db 100644
--- a/apps/web/pages/bookings/[status].tsx
+++ b/apps/web/pages/bookings/[status].tsx
@@ -164,7 +164,7 @@ export default function Bookings() {
             {query.status === "error" && (
               <Alert severity="error" title={t("something_went_wrong")} message={query.error.message} />
             )}
-            {(query.status === "loading" || query.isPaused) && <SkeletonLoader />}
+            {(query.status === "pending" || query.isPaused) && <SkeletonLoader />}
             {query.status === "success" && !isEmpty && (
               <>
                 {!!bookingsToday.length && status === "upcoming" && (
diff --git a/apps/web/pages/connect-and-join.tsx b/apps/web/pages/connect-and-join.tsx
index dae0e11aba..04baf31842 100644
--- a/apps/web/pages/connect-and-join.tsx
+++ b/apps/web/pages/connect-and-join.tsx
@@ -68,7 +68,7 @@ function ConnectAndJoin() {
                 </div>
               ) : (
                 <Button
-                  loading={mutation.isLoading}
+                  loading={mutation.isPending}
                   tooltip={isUserPartOfOrg ? t("join_meeting") : t("not_part_of_org")}
                   disabled={!isUserPartOfOrg}
                   onClick={() => {
diff --git a/apps/web/pages/event-types/[type]/index.tsx b/apps/web/pages/event-types/[type]/index.tsx
index 4125402d8a..d0584e9fd2 100644
--- a/apps/web/pages/event-types/[type]/index.tsx
+++ b/apps/web/pages/event-types/[type]/index.tsx
@@ -552,7 +552,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
         eventType={eventType}
         team={team}
         availability={availability}
-        isUpdateMutationLoading={updateMutation.isLoading}
+        isUpdateMutationLoading={updateMutation.isPending}
         formMethods={formMethods}
         // disableBorder={tabName === "apps" || tabName === "workflows" || tabName === "webhooks"}
         disableBorder={true}
@@ -647,7 +647,7 @@ const EventTypePage = (props: EventTypeSetupProps) => {
       {slugExistsChildrenDialogOpen.length ? (
         <ManagedEventTypeDialog
           slugExistsChildrenDialogOpen={slugExistsChildrenDialogOpen}
-          isLoading={formMethods.formState.isSubmitting}
+          isPending={formMethods.formState.isSubmitting}
           onOpenChange={() => {
             setSlugExistsChildrenDialogOpen([]);
           }}
diff --git a/apps/web/pages/event-types/index.tsx b/apps/web/pages/event-types/index.tsx
index 613bd23794..3ce3c75a51 100644
--- a/apps/web/pages/event-types/index.tsx
+++ b/apps/web/pages/event-types/index.tsx
@@ -686,7 +686,7 @@ export const EventTypeList = ({
           title={t(`delete${isManagedEventPrefix()}_event_type`)}
           confirmBtnText={t(`confirm_delete_event_type`)}
           loadingText={t(`confirm_delete_event_type`)}
-          isLoading={deleteMutation.isLoading}
+          isPending={deleteMutation.isPending}
           onConfirm={(e) => {
             e.preventDefault();
             deleteEventTypeHandler(deleteDialogTypeId);
@@ -856,7 +856,7 @@ const Main = ({
   const searchParams = useCompatSearchParams();
   const orgBranding = useOrgBranding();
 
-  if (!data || status === "loading") {
+  if (!data || status === "pending") {
     return <SkeletonLoader />;
   }
 
@@ -934,7 +934,7 @@ const EventTypesPage = () => {
   // TODO: Maybe useSuspenseQuery to focus on success case only? Remember that it would crash the page when there is an error in query. Also, it won't support skeleton
   const { data, status, error } = trpc.viewer.eventTypes.getByViewer.useQuery(filters && { filters }, {
     refetchOnWindowFocus: false,
-    cacheTime: 1 * 60 * 60 * 1000,
+    gcTime: 1 * 60 * 60 * 1000,
     staleTime: 1 * 60 * 60 * 1000,
   });
 
diff --git a/apps/web/pages/settings/developer/api-keys.tsx b/apps/web/pages/settings/developer/api-keys.tsx
index 3cd759cbb7..1c73cf1b2e 100644
--- a/apps/web/pages/settings/developer/api-keys.tsx
+++ b/apps/web/pages/settings/developer/api-keys.tsx
@@ -36,7 +36,7 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
 const ApiKeysView = () => {
   const { t } = useLocale();
 
-  const { data, isLoading } = trpc.viewer.apiKeys.list.useQuery();
+  const { data, isPending } = trpc.viewer.apiKeys.list.useQuery();
 
   const [apiKeyModal, setApiKeyModal] = useState(false);
   const [apiKeyToEdit, setApiKeyToEdit] = useState<(TApiKeys & { neverExpires?: boolean }) | undefined>(
@@ -57,7 +57,7 @@ const ApiKeysView = () => {
     );
   };
 
-  if (isLoading || !data) {
+  if (isPending || !data) {
     return (
       <SkeletonLoader
         title={t("api_keys")}
diff --git a/apps/web/pages/settings/my-account/appearance.tsx b/apps/web/pages/settings/my-account/appearance.tsx
index e4173758ec..d1031eca1a 100644
--- a/apps/web/pages/settings/my-account/appearance.tsx
+++ b/apps/web/pages/settings/my-account/appearance.tsx
@@ -317,7 +317,7 @@ const AppearanceView = ({
       <SettingsToggle
         toggleSwitchAtTheEnd={true}
         title={t("disable_cal_branding", { appName: APP_NAME })}
-        disabled={!hasPaidPlan || mutation?.isLoading}
+        disabled={!hasPaidPlan || mutation?.isPending}
         description={t("removes_cal_branding", { appName: APP_NAME })}
         checked={hasPaidPlan ? hideBrandingValue : false}
         Badge={<UpgradeTeamsBadge />}
@@ -332,12 +332,12 @@ const AppearanceView = ({
 };
 
 const AppearanceViewWrapper = () => {
-  const { data: user, isLoading } = trpc.viewer.me.useQuery();
-  const { isLoading: isTeamPlanStatusLoading, hasPaidPlan } = useHasPaidPlan();
+  const { data: user, isPending } = trpc.viewer.me.useQuery();
+  const { isPending: isTeamPlanStatusLoading, hasPaidPlan } = useHasPaidPlan();
 
   const { t } = useLocale();
 
-  if (isLoading || isTeamPlanStatusLoading || !user)
+  if (isPending || isTeamPlanStatusLoading || !user)
     return <SkeletonLoader title={t("appearance")} description={t("appearance_description")} />;
 
   return <AppearanceView user={user} hasPaidPlan={hasPaidPlan} />;
diff --git a/apps/web/pages/settings/my-account/general.tsx b/apps/web/pages/settings/my-account/general.tsx
index b1e5bca542..ba5589794a 100644
--- a/apps/web/pages/settings/my-account/general.tsx
+++ b/apps/web/pages/settings/my-account/general.tsx
@@ -51,8 +51,8 @@ interface GeneralViewProps {
 const GeneralQueryView = () => {
   const { t } = useLocale();
 
-  const { data: user, isLoading } = trpc.viewer.me.useQuery();
-  if (isLoading) return <SkeletonLoader title={t("general")} description={t("general_description")} />;
+  const { data: user, isPending } = trpc.viewer.me.useQuery();
+  if (isPending) return <SkeletonLoader title={t("general")} description={t("general_description")} />;
   if (!user) {
     throw new Error(t("something_went_wrong"));
   }
@@ -233,7 +233,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
         toggleSwitchAtTheEnd={true}
         title={t("dynamic_booking")}
         description={t("allow_dynamic_booking")}
-        disabled={mutation.isLoading}
+        disabled={mutation.isPending}
         checked={isAllowDynamicBookingChecked}
         onCheckedChange={(checked) => {
           setIsAllowDynamicBookingChecked(checked);
@@ -246,7 +246,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
         toggleSwitchAtTheEnd={true}
         title={t("seo_indexing")}
         description={t("allow_seo_indexing")}
-        disabled={mutation.isLoading}
+        disabled={mutation.isPending}
         checked={isAllowSEOIndexingChecked}
         onCheckedChange={(checked) => {
           setIsAllowSEOIndexingChecked(checked);
@@ -259,7 +259,7 @@ const GeneralView = ({ localeProp, user }: GeneralViewProps) => {
         toggleSwitchAtTheEnd={true}
         title={t("monthly_digest_email")}
         description={t("monthly_digest_email_for_teams")}
-        disabled={mutation.isLoading}
+        disabled={mutation.isPending}
         checked={isReceiveMonthlyDigestEmailChecked}
         onCheckedChange={(checked) => {
           setIsReceiveMonthlyDigestEmailChecked(checked);
diff --git a/apps/web/pages/settings/my-account/out-of-office/index.tsx b/apps/web/pages/settings/my-account/out-of-office/index.tsx
index 6238b0e0f4..7912d02fe8 100644
--- a/apps/web/pages/settings/my-account/out-of-office/index.tsx
+++ b/apps/web/pages/settings/my-account/out-of-office/index.tsx
@@ -155,7 +155,7 @@ const OutOfOfficeSection = () => {
           <Button
             color="primary"
             type="submit"
-            disabled={createOutOfOfficeEntry.isLoading}
+            disabled={createOutOfOfficeEntry.isPending}
             data-testid="create-entry-ooo-redirect">
             {t("create_entry")}
           </Button>
@@ -168,7 +168,7 @@ const OutOfOfficeSection = () => {
 const OutOfOfficeEntriesList = () => {
   const { t } = useLocale();
   const utils = trpc.useContext();
-  const { data, isLoading } = trpc.viewer.outOfOfficeEntriesList.useQuery();
+  const { data, isPending } = trpc.viewer.outOfOfficeEntriesList.useQuery();
   const deleteOutOfOfficeEntryMutation = trpc.viewer.outOfOfficeEntryDelete.useMutation({
     onSuccess: () => {
       showToast(t("success_deleted_entry_out_of_office"), "success");
@@ -207,7 +207,7 @@ const OutOfOfficeEntriesList = () => {
                   type="button"
                   color="minimal"
                   variant="icon"
-                  disabled={deleteOutOfOfficeEntryMutation.isLoading}
+                  disabled={deleteOutOfOfficeEntryMutation.isPending}
                   StartIcon={Trash2}
                   onClick={() => {
                     deleteOutOfOfficeEntryMutation.mutate({ outOfOfficeUid: item.uuid });
@@ -216,7 +216,7 @@ const OutOfOfficeEntriesList = () => {
               </TableCell>
             </TableRow>
           ))}
-          {isLoading && (
+          {isPending && (
             <TableRow>
               {new Array(6).fill(0).map((_, index) => (
                 <TableCell key={index}>
@@ -226,7 +226,7 @@ const OutOfOfficeEntriesList = () => {
             </TableRow>
           )}
 
-          {!isLoading && (data === undefined || data.length === 0) && (
+          {!isPending && (data === undefined || data.length === 0) && (
             <TableRow>
               <TableCell colSpan={6} className="text-center">
                 <p className="text-subtle text-sm">{t("no_redirects_found")}</p>
diff --git a/apps/web/pages/settings/my-account/profile.tsx b/apps/web/pages/settings/my-account/profile.tsx
index 8a67dad45e..a061324fde 100644
--- a/apps/web/pages/settings/my-account/profile.tsx
+++ b/apps/web/pages/settings/my-account/profile.tsx
@@ -84,10 +84,10 @@ const ProfileView = () => {
   const { t } = useLocale();
   const utils = trpc.useContext();
   const { update } = useSession();
-  const { data: user, isLoading } = trpc.viewer.me.useQuery();
+  const { data: user, isPending } = trpc.viewer.me.useQuery();
 
   const { data: avatarData } = trpc.viewer.avatar.useQuery(undefined, {
-    enabled: !isLoading && !user?.avatarUrl,
+    enabled: !isPending && !user?.avatarUrl,
   });
 
   const updateProfileMutation = trpc.viewer.updateProfile.useMutation({
@@ -222,7 +222,7 @@ const ProfileView = () => {
     [ErrorCode.ThirdPartyIdentityProviderEnabled]: t("account_created_with_identity_provider"),
   };
 
-  if (isLoading || !user) {
+  if (isPending || !user) {
     return (
       <SkeletonLoader title={t("profile")} description={t("profile_description", { appName: APP_NAME })} />
     );
@@ -246,7 +246,7 @@ const ProfileView = () => {
       <ProfileForm
         key={JSON.stringify(defaultValues)}
         defaultValues={defaultValues}
-        isLoading={updateProfileMutation.isLoading}
+        isPending={updateProfileMutation.isPending}
         isFallbackImg={!user.avatarUrl && !avatarData?.avatar}
         user={user}
         userOrganization={user.organization}
@@ -354,7 +354,7 @@ const ProfileView = () => {
           <DialogFooter showDivider>
             <Button
               color="primary"
-              loading={confirmPasswordMutation.isLoading}
+              loading={confirmPasswordMutation.isPending}
               onClick={(e) => onConfirmPassword(e)}>
               {t("confirm")}
             </Button>
@@ -375,7 +375,7 @@ const ProfileView = () => {
           <DialogFooter>
             <Button
               color="primary"
-              loading={updateProfileMutation.isLoading}
+              loading={updateProfileMutation.isPending}
               onClick={(e) => onConfirmAuthEmailChange(e)}>
               {t("confirm")}
             </Button>
@@ -391,7 +391,7 @@ const ProfileForm = ({
   defaultValues,
   onSubmit,
   extraField,
-  isLoading = false,
+  isPending = false,
   isFallbackImg,
   user,
   userOrganization,
@@ -399,7 +399,7 @@ const ProfileForm = ({
   defaultValues: FormValues;
   onSubmit: (values: FormValues) => void;
   extraField?: React.ReactNode;
-  isLoading: boolean;
+  isPending: boolean;
   isFallbackImg: boolean;
   user: RouterOutputs["viewer"]["me"];
   userOrganization: RouterOutputs["viewer"]["me"]["organization"];
@@ -509,7 +509,7 @@ const ProfileForm = ({
         </div>
       </div>
       <SectionBottomActions align="end">
-        <Button loading={isLoading} disabled={isDisabled} color="primary" type="submit">
+        <Button loading={isPending} disabled={isDisabled} color="primary" type="submit">
           {t("update")}
         </Button>
       </SectionBottomActions>
diff --git a/apps/web/pages/settings/security/impersonation.tsx b/apps/web/pages/settings/security/impersonation.tsx
index 7950f64129..6a4143d7ab 100644
--- a/apps/web/pages/settings/security/impersonation.tsx
+++ b/apps/web/pages/settings/security/impersonation.tsx
@@ -69,7 +69,7 @@ const ProfileImpersonationView = ({ user }: { user: RouterOutputs["viewer"]["me"
             mutation.mutate({ disableImpersonation: !checked });
           }}
           switchContainerClassName="rounded-t-none border-t-0"
-          disabled={mutation.isLoading}
+          disabled={mutation.isPending}
         />
       </div>
     </>
@@ -77,10 +77,10 @@ const ProfileImpersonationView = ({ user }: { user: RouterOutputs["viewer"]["me"
 };
 
 const ProfileImpersonationViewWrapper = () => {
-  const { data: user, isLoading } = trpc.viewer.me.useQuery();
+  const { data: user, isPending } = trpc.viewer.me.useQuery();
   const { t } = useLocale();
 
-  if (isLoading || !user)
+  if (isPending || !user)
     return <SkeletonLoader title={t("impersonation")} description={t("impersonation_description")} />;
 
   return <ProfileImpersonationView user={user} />;
diff --git a/apps/web/pages/settings/security/password.tsx b/apps/web/pages/settings/security/password.tsx
index 7460ffa455..b52fa27209 100644
--- a/apps/web/pages/settings/security/password.tsx
+++ b/apps/web/pages/settings/security/password.tsx
@@ -215,9 +215,9 @@ const PasswordView = ({ user }: PasswordViewProps) => {
             <Button
               color="primary"
               type="submit"
-              loading={passwordMutation.isLoading}
+              loading={passwordMutation.isPending}
               onClick={() => formMethods.clearErrors("apiError")}
-              disabled={isDisabled || passwordMutation.isLoading || sessionMutation.isLoading}>
+              disabled={isDisabled || passwordMutation.isPending || sessionMutation.isPending}>
               {t("update")}
             </Button>
           </SectionBottomActions>
@@ -268,7 +268,7 @@ const PasswordView = ({ user }: PasswordViewProps) => {
                 <SectionBottomActions align="end">
                   <Button
                     color="primary"
-                    loading={sessionMutation.isLoading}
+                    loading={sessionMutation.isPending}
                     onClick={() => {
                       sessionMutation.mutate({
                         metadata: { ...metadata, sessionTimeout },
@@ -277,8 +277,8 @@ const PasswordView = ({ user }: PasswordViewProps) => {
                     }}
                     disabled={
                       initialSessionTimeout === sessionTimeout ||
-                      passwordMutation.isLoading ||
-                      sessionMutation.isLoading
+                      passwordMutation.isPending ||
+                      sessionMutation.isPending
                     }>
                     {t("update")}
                   </Button>
@@ -293,9 +293,9 @@ const PasswordView = ({ user }: PasswordViewProps) => {
 };
 
 const PasswordViewWrapper = () => {
-  const { data: user, isLoading } = trpc.viewer.me.useQuery();
+  const { data: user, isPending } = trpc.viewer.me.useQuery();
   const { t } = useLocale();
-  if (isLoading || !user)
+  if (isPending || !user)
     return <SkeletonLoader title={t("password")} description={t("password_description")} />;
 
   return <PasswordView user={user} />;
diff --git a/apps/web/pages/settings/security/two-factor-auth.tsx b/apps/web/pages/settings/security/two-factor-auth.tsx
index e5c7f13d9a..712b6867ee 100644
--- a/apps/web/pages/settings/security/two-factor-auth.tsx
+++ b/apps/web/pages/settings/security/two-factor-auth.tsx
@@ -37,12 +37,12 @@ const TwoFactorAuthView = () => {
   const utils = trpc.useContext();
 
   const { t } = useLocale();
-  const { data: user, isLoading } = trpc.viewer.me.useQuery();
+  const { data: user, isPending } = trpc.viewer.me.useQuery();
 
   const [enableModalOpen, setEnableModalOpen] = useState<boolean>(false);
   const [disableModalOpen, setDisableModalOpen] = useState<boolean>(false);
 
-  if (isLoading)
+  if (isPending)
     return <SkeletonLoader title={t("2fa")} description={t("set_up_two_factor_authentication")} />;
 
   const isCalProvider = user?.identityProvider === "CAL";
diff --git a/apps/web/server/lib/ssg.ts b/apps/web/server/lib/ssg.ts
index d08313d859..00e8c64f39 100644
--- a/apps/web/server/lib/ssg.ts
+++ b/apps/web/server/lib/ssg.ts
@@ -4,7 +4,7 @@ import superjson from "superjson";
 
 import { CALCOM_VERSION } from "@calcom/lib/constants";
 import prisma, { readonlyPrisma } from "@calcom/prisma";
-import { createProxySSGHelpers } from "@calcom/trpc/react/ssg";
+import { createServerSideHelpers } from "@calcom/trpc/react/server";
 import { appRouter } from "@calcom/trpc/server/routers/_app";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -26,7 +26,7 @@ export async function ssgInit<TParams extends { locale?: string }>(opts: GetStat
 
   const _i18n = await serverSideTranslations(locale, ["common"]);
 
-  const ssg = createProxySSGHelpers({
+  const ssg = createServerSideHelpers({
     router: appRouter,
     transformer: superjson,
     ctx: {
diff --git a/apps/web/server/lib/ssr.ts b/apps/web/server/lib/ssr.ts
index eaf5e4790c..64632ad5e1 100644
--- a/apps/web/server/lib/ssr.ts
+++ b/apps/web/server/lib/ssr.ts
@@ -6,7 +6,7 @@ import { forms } from "@calcom/app-store/routing-forms/trpc/procedures/forms";
 import { getLocale } from "@calcom/features/auth/lib/getLocale";
 import { map } from "@calcom/features/flags/server/procedures/map";
 import { CALCOM_VERSION } from "@calcom/lib/constants";
-import { createProxySSGHelpers } from "@calcom/trpc/react/ssg";
+import { createServerSideHelpers } from "@calcom/trpc/react/server";
 import { createContext } from "@calcom/trpc/server/createContext";
 import { me } from "@calcom/trpc/server/routers/loggedInViewer/procedures/me";
 import { teamsAndUserProfilesQuery } from "@calcom/trpc/server/routers/loggedInViewer/procedures/teamsAndUserProfilesQuery";
@@ -59,7 +59,7 @@ export async function ssrInit(context: GetServerSidePropsContext, options?: { no
   const locale = await getLocale(context.req);
   const i18n = await serverSideTranslations(locale, ["common", "vital"]);
 
-  const ssr = createProxySSGHelpers({
+  const ssr = createServerSideHelpers({
     router: routerSlice,
     transformer: superjson,
     ctx: { ...ctx, locale, i18n },
diff --git a/packages/app-store/_components/OmniInstallAppButton.tsx b/packages/app-store/_components/OmniInstallAppButton.tsx
index 0b4ed9556b..b082025c1d 100644
--- a/packages/app-store/_components/OmniInstallAppButton.tsx
+++ b/packages/app-store/_components/OmniInstallAppButton.tsx
@@ -71,7 +71,7 @@ export default function OmniInstallAppButton({
 
         return (
           <Button
-            loading={mutation.isLoading}
+            loading={mutation.isPending}
             color="secondary"
             className="[@media(max-width:260px)]:w-full [@media(max-width:260px)]:justify-center"
             StartIcon={Plus}
diff --git a/packages/app-store/_utils/useAddAppMutation.ts b/packages/app-store/_utils/useAddAppMutation.ts
index 76becbbf10..9a2cfa5612 100644
--- a/packages/app-store/_utils/useAddAppMutation.ts
+++ b/packages/app-store/_utils/useAddAppMutation.ts
@@ -32,64 +32,67 @@ function useAddAppMutation(_type: App["type"] | null, allOptions?: UseAddAppMuta
     AddAppMutationData,
     Error,
     { type?: App["type"]; variant?: string; slug?: string; isOmniInstall?: boolean; teamId?: number } | ""
-  >(async (variables) => {
-    let type: string | null | undefined;
-    let isOmniInstall;
-    const teamId = variables && variables.teamId ? variables.teamId : undefined;
-    if (variables === "") {
-      type = _type;
-    } else {
-      isOmniInstall = variables.isOmniInstall;
-      type = variables.type;
-    }
-    if (type?.endsWith("_other_calendar")) {
-      type = type.split("_other_calendar")[0];
-    }
+  >({
+    ...options,
+    mutationFn: async (variables) => {
+      let type: string | null | undefined;
+      let isOmniInstall;
+      const teamId = variables && variables.teamId ? variables.teamId : undefined;
+      if (variables === "") {
+        type = _type;
+      } else {
+        isOmniInstall = variables.isOmniInstall;
+        type = variables.type;
+      }
+      if (type?.endsWith("_other_calendar")) {
+        type = type.split("_other_calendar")[0];
+      }
 
-    if (options?.installGoogleVideo && type !== "google_calendar")
-      throw new Error("Could not install Google Meet");
+      if (options?.installGoogleVideo && type !== "google_calendar")
+        throw new Error("Could not install Google Meet");
 
-    const state: IntegrationOAuthCallbackState = {
-      returnTo:
-        returnTo ||
-        WEBAPP_URL +
-          getInstalledAppPath(
-            { variant: variables && variables.variant, slug: variables && variables.slug },
-            location.search
-          ),
-      ...(type === "google_calendar" && { installGoogleVideo: options?.installGoogleVideo }),
-      ...(teamId && { teamId }),
-    };
+      const state: IntegrationOAuthCallbackState = {
+        returnTo:
+          returnTo ||
+          WEBAPP_URL +
+            getInstalledAppPath(
+              { variant: variables && variables.variant, slug: variables && variables.slug },
+              location.search
+            ),
+        ...(type === "google_calendar" && { installGoogleVideo: options?.installGoogleVideo }),
+        ...(teamId && { teamId }),
+      };
 
-    const stateStr = encodeURIComponent(JSON.stringify(state));
-    const searchParams = `?state=${stateStr}${teamId ? `&teamId=${teamId}` : ""}`;
+      const stateStr = encodeURIComponent(JSON.stringify(state));
+      const searchParams = `?state=${stateStr}${teamId ? `&teamId=${teamId}` : ""}`;
 
-    const res = await fetch(`/api/integrations/${type}/add${searchParams}`);
+      const res = await fetch(`/api/integrations/${type}/add${searchParams}`);
 
-    if (!res.ok) {
-      const errorBody = await res.json();
-      throw new Error(errorBody.message || "Something went wrong");
-    }
+      if (!res.ok) {
+        const errorBody = await res.json();
+        throw new Error(errorBody.message || "Something went wrong");
+      }
+
+      const json = await res.json();
+      const externalUrl = /https?:\/\//.test(json.url) && !json.url.startsWith(window.location.origin);
+      if (!isOmniInstall) {
+        gotoUrl(json.url, json.newTab);
+        return { setupPending: externalUrl || json.url.endsWith("/setup") };
+      }
+
+      // Skip redirection only if it is an OmniInstall and redirect URL isn't of some other origin
+      // This allows installation of apps like Stripe to still redirect to their authentication pages.
+
+      // Check first that the URL is absolute, then check that it is of different origin from the current.
+      if (externalUrl) {
+        // TODO: For Omni installation to authenticate and come back to the page where installation was initiated, some changes need to be done in all apps' add callbacks
+        gotoUrl(json.url, json.newTab);
+        return { setupPending: externalUrl };
+      }
 
-    const json = await res.json();
-    const externalUrl = /https?:\/\//.test(json.url) && !json.url.startsWith(window.location.origin);
-    if (!isOmniInstall) {
-      gotoUrl(json.url, json.newTab);
       return { setupPending: externalUrl || json.url.endsWith("/setup") };
-    }
-
-    // Skip redirection only if it is an OmniInstall and redirect URL isn't of some other origin
-    // This allows installation of apps like Stripe to still redirect to their authentication pages.
-
-    // Check first that the URL is absolute, then check that it is of different origin from the current.
-    if (externalUrl) {
-      // TODO: For Omni installation to authenticate and come back to the page where installation was initiated, some changes need to be done in all apps' add callbacks
-      gotoUrl(json.url, json.newTab);
-      return { setupPending: externalUrl };
-    }
-
-    return { setupPending: externalUrl || json.url.endsWith("/setup") };
-  }, options);
+    },
+  });
 
   return mutation;
 }
diff --git a/packages/app-store/alby/pages/setup/index.tsx b/packages/app-store/alby/pages/setup/index.tsx
index ae447708c3..67b8e83e56 100644
--- a/packages/app-store/alby/pages/setup/index.tsx
+++ b/packages/app-store/alby/pages/setup/index.tsx
@@ -121,7 +121,7 @@ function AlbySetupPage(props: IAlbySetupProps) {
     });
   }, [credentialId, props.clientId, props.clientSecret, saveKeysMutation]);
 
-  if (integrations.isLoading) {
+  if (integrations.isPending) {
     return <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200" />;
   }
 
diff --git a/packages/app-store/basecamp3/components/EventTypeAppCardInterface.tsx b/packages/app-store/basecamp3/components/EventTypeAppCardInterface.tsx
index cbab47df35..98a5518ab8 100644
--- a/packages/app-store/basecamp3/components/EventTypeAppCardInterface.tsx
+++ b/packages/app-store/basecamp3/components/EventTypeAppCardInterface.tsx
@@ -15,22 +15,26 @@ const EventTypeAppCard: EventTypeAppCardComponent = function EventTypeAppCard({
   const [selectedProject, setSelectedProject] = useState<undefined | { label: string; value: string }>();
   const { data } = trpc.viewer.appBasecamp3.projects.useQuery();
   const setProject = trpc.viewer.appBasecamp3.projectMutation.useMutation();
-  useEffect(() => {
-    setSelectedProject({
-      value: data?.projects.currentProject,
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      label: data?.projects?.find((project: any) => project.id === data?.currentProject)?.name,
-    });
-    setProjects(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      data?.projects?.map((project: any) => {
-        return {
-          value: project.id,
-          label: project.name,
-        };
-      })
-    );
-  }, [data]);
+
+  useEffect(
+    function refactorMeWithoutEffect() {
+      setSelectedProject({
+        value: data?.projects.currentProject,
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        label: data?.projects?.find((project: any) => project.id === data?.currentProject)?.name,
+      });
+      setProjects(
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        data?.projects?.map((project: any) => {
+          return {
+            value: project.id,
+            label: project.name,
+          };
+        })
+      );
+    },
+    [data]
+  );
 
   return (
     <AppCard
diff --git a/packages/app-store/components.tsx b/packages/app-store/components.tsx
index a7c4eb3711..9a0263c89b 100644
--- a/packages/app-store/components.tsx
+++ b/packages/app-store/components.tsx
@@ -34,7 +34,7 @@ export const InstallAppButtonWithoutPlanCheck = (
           onClick: () => {
             mutation.mutate({ type: props.type });
           },
-          loading: mutation.isLoading,
+          loading: mutation.isPending,
         })}
       </>
     );
@@ -56,10 +56,10 @@ export const InstallAppButton = (
     disableInstall?: boolean;
   } & InstallAppButtonProps
 ) => {
-  const { isLoading: isUserLoading, data: user } = trpc.viewer.me.useQuery();
+  const { isPending: isUserLoading, data: user } = trpc.viewer.me.useQuery();
   const router = useRouter();
   const proProtectionElementRef = useRef<HTMLDivElement | null>(null);
-  const { isLoading: isTeamPlanStatusLoading, hasTeamPlan } = useHasTeamPlan();
+  const { isPending: isTeamPlanStatusLoading, hasTeamPlan } = useHasTeamPlan();
 
   useEffect(() => {
     const el = proProtectionElementRef.current;
diff --git a/packages/app-store/exchange2013calendar/components/InstallAppButton.tsx b/packages/app-store/exchange2013calendar/components/InstallAppButton.tsx
index da7aacfbb7..84d7ffcbee 100644
--- a/packages/app-store/exchange2013calendar/components/InstallAppButton.tsx
+++ b/packages/app-store/exchange2013calendar/components/InstallAppButton.tsx
@@ -11,7 +11,7 @@ export default function InstallAppButton(props: InstallAppButtonProps) {
         onClick() {
           mutation.mutate("");
         },
-        loading: mutation.isLoading,
+        loading: mutation.isPending,
       })}
     </>
   );
diff --git a/packages/app-store/exchange2016calendar/components/InstallAppButton.tsx b/packages/app-store/exchange2016calendar/components/InstallAppButton.tsx
index e0339a3638..f64b5b72c8 100644
--- a/packages/app-store/exchange2016calendar/components/InstallAppButton.tsx
+++ b/packages/app-store/exchange2016calendar/components/InstallAppButton.tsx
@@ -9,7 +9,7 @@ export default function InstallAppButton(props: InstallAppButtonProps) {
         onClick() {
           mutation.mutate("");
         },
-        loading: mutation.isLoading,
+        loading: mutation.isPending,
       })}
     </>
   );
diff --git a/packages/app-store/giphy/components/SearchDialog.tsx b/packages/app-store/giphy/components/SearchDialog.tsx
index c472abee70..cd05adf201 100644
--- a/packages/app-store/giphy/components/SearchDialog.tsx
+++ b/packages/app-store/giphy/components/SearchDialog.tsx
@@ -23,15 +23,15 @@ export const SearchDialog = (props: ISearchDialog) => {
   const [nextOffset, setNextOffset] = useState<number>(0);
   const [keyword, setKeyword] = useState<string>("");
   const { isOpenDialog, setIsOpenDialog } = props;
-  const [isLoading, setIsLoading] = useState(false);
+  const [isPending, setIsPending] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const [selectedMode, setSelectedMode] = useState<Mode>(MODE_SEARCH);
 
   const searchGiphy = async (keyword: string, offset: number) => {
-    if (isLoading) {
+    if (isPending) {
       return;
     }
-    setIsLoading(true);
+    setIsPending(true);
     setErrorMessage("");
     const res = await fetch("/api/integrations/giphy/search", {
       method: "POST",
@@ -53,15 +53,15 @@ export const SearchDialog = (props: ISearchDialog) => {
         setErrorMessage("No Result found");
       }
     }
-    setIsLoading(false);
+    setIsPending(false);
     return null;
   };
 
   const getGiphyByUrl = async (url: string) => {
-    if (isLoading) {
+    if (isPending) {
       return;
     }
-    setIsLoading(true);
+    setIsPending(true);
     setErrorMessage("");
     const res = await fetch("/api/integrations/giphy/get", {
       method: "POST",
@@ -81,7 +81,7 @@ export const SearchDialog = (props: ISearchDialog) => {
         setErrorMessage("No Result found");
       }
     }
-    setIsLoading(false);
+    setIsPending(false);
     return null;
   };
 
@@ -139,14 +139,14 @@ export const SearchDialog = (props: ISearchDialog) => {
               }}
             />
           </div>
-          <Button type="submit" tabIndex={-1} color="secondary" loading={isLoading}>
+          <Button type="submit" tabIndex={-1} color="secondary" loading={isPending}>
             {t("search")}
           </Button>
         </form>
         {gifImage && (
           <div className="flex flex-col items-center space-x-2 space-y-2 pt-3 rtl:space-x-reverse">
             <div className="bg-subtle flex w-full items-center justify-center">
-              {isLoading ? (
+              {isPending ? (
                 <div className="flex h-[200px] w-full items-center justify-center bg-gray-400 pb-3 pt-3">
                   <svg
                     className={classNames("mx-4 h-5 w-5 animate-spin", "text-inverted dark:text-emphasis")}
@@ -182,7 +182,7 @@ export const SearchDialog = (props: ISearchDialog) => {
               size="sm"
               color="secondary"
               type="button"
-              loading={isLoading}
+              loading={isPending}
               onClick={() => searchGiphy(keyword, nextOffset)}>
               Shuffle
             </Button>
diff --git a/packages/app-store/make/pages/setup/index.tsx b/packages/app-store/make/pages/setup/index.tsx
index 5b6c28bffb..4957bad38a 100644
--- a/packages/app-store/make/pages/setup/index.tsx
+++ b/packages/app-store/make/pages/setup/index.tsx
@@ -59,7 +59,7 @@ export default function MakeSetup({ inviteLink }: InferGetServerSidePropsType<ty
     setNewApiKeys({ ...newApiKeys, [teamId || ""]: apiKey });
   }
 
-  if (integrations.isLoading) {
+  if (integrations.isPending) {
     return <div className="bg-emphasis absolute z-50 flex h-screen w-full items-center" />;
   }
 
diff --git a/packages/app-store/paypal/pages/setup/index.tsx b/packages/app-store/paypal/pages/setup/index.tsx
index b4745360ae..a93e33575b 100644
--- a/packages/app-store/paypal/pages/setup/index.tsx
+++ b/packages/app-store/paypal/pages/setup/index.tsx
@@ -27,7 +27,7 @@ export default function PayPalSetup() {
     },
   });
 
-  if (integrations.isLoading) {
+  if (integrations.isPending) {
     return <div className="absolute z-50 flex h-screen w-full items-center bg-gray-200" />;
   }
 
diff --git a/packages/app-store/routing-forms/components/FormActions.tsx b/packages/app-store/routing-forms/components/FormActions.tsx
index 337b8c30d3..3723b43afb 100644
--- a/packages/app-store/routing-forms/components/FormActions.tsx
+++ b/packages/app-store/routing-forms/components/FormActions.tsx
@@ -147,7 +147,7 @@ function NewFormDialog({ appUrl }: { appUrl: string }) {
           </div>
           <DialogFooter showDivider className="mt-12">
             <DialogClose />
-            <Button loading={mutation.isLoading} data-testid="add-form" type="submit">
+            <Button loading={mutation.isPending} data-testid="add-form" type="submit">
               {t("continue")}
             </Button>
           </DialogFooter>
@@ -234,7 +234,7 @@ function Dialogs({
       <RoutingFormEmbedDialog />
       <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
         <ConfirmationDialogContent
-          isLoading={deleteMutation.isLoading}
+          isPending={deleteMutation.isPending}
           variety="danger"
           title={t("delete_form")}
           confirmBtnText={t("delete_form_action")}
@@ -264,12 +264,12 @@ const actionsCtx = createContext({
   _delete: {
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     onAction: (_arg: { routingForm: RoutingForm | null }) => {},
-    isLoading: false,
+    isPending: false,
   },
   toggle: {
     // eslint-disable-next-line @typescript-eslint/no-empty-function, @typescript-eslint/no-unused-vars
     onAction: (_arg: { routingForm: RoutingForm | null; checked: boolean }) => {},
-    isLoading: false,
+    isPending: false,
   },
 });
 
@@ -332,7 +332,7 @@ export function FormActionsProvider({ appUrl, children }: { appUrl: string; chil
               setDeleteDialogOpen(true);
               setDeleteDialogFormId(routingForm.id);
             },
-            isLoading: false,
+            isPending: false,
           },
           toggle: {
             onAction: ({ routingForm, checked }) => {
@@ -344,7 +344,7 @@ export function FormActionsProvider({ appUrl, children }: { appUrl: string; chil
                 disabled: !checked,
               });
             },
-            isLoading: toggleMutation.isLoading,
+            isPending: toggleMutation.isPending,
           },
         }}>
         {children}
@@ -446,7 +446,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
     },
     _delete: {
       onClick: () => _delete.onAction({ routingForm }),
-      loading: _delete.isLoading,
+      loading: _delete.isPending,
     },
     create: {
       onClick: () => openModal({ action: "new", target: "" }),
@@ -479,7 +479,7 @@ export const FormAction = forwardRef(function FormAction<T extends typeof Button
           </div>
         );
       },
-      loading: toggle.isLoading,
+      loading: toggle.isPending,
     },
   };
 
diff --git a/packages/app-store/routing-forms/components/SingleForm.tsx b/packages/app-store/routing-forms/components/SingleForm.tsx
index 32c9909344..d46f0e109c 100644
--- a/packages/app-store/routing-forms/components/SingleForm.tsx
+++ b/packages/app-store/routing-forms/components/SingleForm.tsx
@@ -65,7 +65,7 @@ const Actions = ({
 }: {
   form: RoutingFormWithResponseCount;
   mutation: {
-    isLoading: boolean;
+    isPending: boolean;
   };
 }) => {
   const { t } = useLocale();
@@ -218,7 +218,7 @@ const Actions = ({
         </FormActionsDropdown>
       </div>
       <VerticalDivider />
-      <Button data-testid="update-form" loading={mutation.isLoading} type="submit" color="primary">
+      <Button data-testid="update-form" loading={mutation.isPending} type="submit" color="primary">
         {t("save")}
       </Button>
     </div>
@@ -518,7 +518,7 @@ function SingleForm({ form, appUrl, Page }: SingleFormComponentProps) {
 }
 
 export default function SingleFormWrapper({ form: _form, ...props }: SingleFormComponentProps) {
-  const { data: form, isLoading } = trpc.viewer.appRoutingForms.formQuery.useQuery(
+  const { data: form, isPending } = trpc.viewer.appRoutingForms.formQuery.useQuery(
     { id: _form.id },
     {
       initialData: _form,
@@ -527,7 +527,7 @@ export default function SingleFormWrapper({ form: _form, ...props }: SingleFormC
   );
   const { t } = useLocale();
 
-  if (isLoading) {
+  if (isPending) {
     // It shouldn't be possible because we are passing the data from SSR to it as initialData. So, no need for skeleton here
     return null;
   }
diff --git a/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx b/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
index 7a55917caa..a312f8908e 100644
--- a/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/reporting/[...appPages].tsx
@@ -34,7 +34,7 @@ type QueryBuilderUpdatedConfig = typeof QueryBuilderInitialConfig & { fields: Co
 const Result = ({ formId, jsonLogicQuery }: { formId: string; jsonLogicQuery: JsonLogicQuery | null }) => {
   const { t } = useLocale();
 
-  const { isLoading, status, data, isFetching, error, isFetchingNextPage, hasNextPage, fetchNextPage } =
+  const { isPending, status, data, isFetching, error, isFetchingNextPage, hasNextPage, fetchNextPage } =
     trpc.viewer.appRoutingForms.report.useInfiniteQuery(
       {
         formId: formId,
@@ -57,7 +57,7 @@ const Result = ({ formId, jsonLogicQuery }: { formId: string; jsonLogicQuery: Js
 
   const headers = useRef<string[] | null>(null);
 
-  if (!isLoading && !data) {
+  if (!isPending && !data) {
     return <div>Error loading report {error?.message} </div>;
   }
   headers.current = (data?.pages && data?.pages[0]?.headers) || headers.current;
@@ -81,7 +81,7 @@ const Result = ({ formId, jsonLogicQuery }: { formId: string; jsonLogicQuery: Js
             </th>
           ))}
         </tr>
-        {!isLoading &&
+        {!isPending &&
           data?.pages.map((page) => {
             return page.responses?.map((responses, rowIndex) => {
               const isLastRow = page.responses.length - 1 === rowIndex;
@@ -113,7 +113,7 @@ const Result = ({ formId, jsonLogicQuery }: { formId: string; jsonLogicQuery: Js
             });
           })}
       </table>
-      {isLoading ? <div className="text-default p-2">{t("loading")}</div> : ""}
+      {isPending ? <div className="text-default p-2">{t("loading")}</div> : ""}
       {hasNextPage && (
         <Button
           type="button"
diff --git a/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx b/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
index c3e39dc596..50f081c74b 100644
--- a/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
+++ b/packages/app-store/routing-forms/pages/routing-link/[...appPages].tsx
@@ -153,7 +153,7 @@ function RoutingForm({ form, profile, ...restProps }: Props) {
                     <div className="mt-4 flex justify-end space-x-2 rtl:space-x-reverse">
                       <Button
                         className="dark:bg-darkmodebrand dark:text-darkmodebrandcontrast dark:hover:border-darkmodebrandcontrast dark:border-transparent"
-                        loading={responseMutation.isLoading}
+                        loading={responseMutation.isPending}
                         type="submit"
                         color="primary">
                         {t("submit")}
diff --git a/packages/app-store/types.d.ts b/packages/app-store/types.d.ts
index f6755c385a..d642562fff 100644
--- a/packages/app-store/types.d.ts
+++ b/packages/app-store/types.d.ts
@@ -35,7 +35,7 @@ export interface InstallAppButtonProps {
     renderProps: ButtonProps & {
       /** Tells that the default render component should be used */
       useDefaultComponent?: boolean;
-      isLoading?: boolean;
+      isPending?: boolean;
     }
   ) => JSX.Element;
   onChanged?: () => unknown;
diff --git a/packages/app-store/wipemycalother/components/confirmDialog.tsx b/packages/app-store/wipemycalother/components/confirmDialog.tsx
index 0485e0c203..f935f04e39 100644
--- a/packages/app-store/wipemycalother/components/confirmDialog.tsx
+++ b/packages/app-store/wipemycalother/components/confirmDialog.tsx
@@ -44,7 +44,7 @@ const wipeMyCalAction = async (props: IWipeMyCalAction) => {
 export const ConfirmDialog = (props: IConfirmDialogWipe) => {
   const { t } = useLocale();
   const { isOpenDialog, setIsOpenDialog } = props;
-  const [isLoading, setIsLoading] = useState(false);
+  const [isPending, setIsPending] = useState(false);
   const today = dayjs();
   const initialDate = today.startOf("day");
   const endDate = today.endOf("day");
@@ -52,9 +52,9 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
 
   const utils = trpc.useContext();
 
-  const rescheduleApi = useMutation(
-    async () => {
-      setIsLoading(true);
+  const rescheduleApi = useMutation({
+    mutationFn: async () => {
+      setIsPending(true);
       try {
         const result = await wipeMyCalAction({
           initialDate: initialDate.toISOString(),
@@ -68,14 +68,12 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
         showToast(t("unexpected_error_try_again"), "error");
         // @TODO: notify
       }
-      setIsLoading(false);
+      setIsPending(false);
     },
-    {
-      async onSettled() {
-        await utils.viewer.bookings.invalidate();
-      },
-    }
-  );
+    async onSettled() {
+      await utils.viewer.bookings.invalidate();
+    },
+  });
 
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
@@ -104,7 +102,7 @@ export const ConfirmDialog = (props: IConfirmDialogWipe) => {
           <Button
             color="primary"
             data-testid="send_request"
-            disabled={isLoading}
+            disabled={isPending}
             onClick={async () => {
               try {
                 rescheduleApi.mutate();
diff --git a/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx b/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx
index 4887c4ac73..4c4daff04f 100644
--- a/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx
+++ b/packages/app-store/wipemycalother/components/wipeMyCalActionButton.tsx
@@ -13,7 +13,7 @@ interface IWipeMyCalActionButtonProps {
 const WipeMyCalActionButton = (props: IWipeMyCalActionButtonProps) => {
   const { bookingsEmpty, bookingStatus } = props;
   const [openDialog, setOpenDialog] = useState(false);
-  const { isSuccess, isLoading, data } = trpc.viewer.integrations.useQuery({
+  const { isSuccess, isPending, data } = trpc.viewer.integrations.useQuery({
     variant: "other",
     onlyInstalled: undefined,
   });
@@ -27,7 +27,7 @@ const WipeMyCalActionButton = (props: IWipeMyCalActionButtonProps) => {
 
   return (
     <>
-      {data && isSuccess && !isLoading && credentialId && (
+      {data && isSuccess && !isPending && credentialId && (
         <div className="mb-4">
           <ConfirmDialog isOpenDialog={openDialog} setIsOpenDialog={setOpenDialog} />
           <Button color="primary" onClick={() => setOpenDialog(true)} data-testid="wipe-today-button">
diff --git a/packages/app-store/zapier/pages/setup/index.tsx b/packages/app-store/zapier/pages/setup/index.tsx
index ee52873c7a..c07914e509 100644
--- a/packages/app-store/zapier/pages/setup/index.tsx
+++ b/packages/app-store/zapier/pages/setup/index.tsx
@@ -60,7 +60,7 @@ export default function ZapierSetup(props: IZapierSetupProps) {
     setNewApiKeys({ ...newApiKeys, [teamId || ""]: apiKey });
   }
 
-  if (integrations.isLoading) {
+  if (integrations.isPending) {
     return <div className="bg-emphasis absolute z-50 flex h-screen w-full items-center" />;
   }
 
diff --git a/packages/features/apps/AdminAppsList.tsx b/packages/features/apps/AdminAppsList.tsx
index 46277b242e..ee7bf677ae 100644
--- a/packages/features/apps/AdminAppsList.tsx
+++ b/packages/features/apps/AdminAppsList.tsx
@@ -270,7 +270,7 @@ const AdminAppsListContainer = () => {
   const { t } = useLocale();
   const category = searchParams?.get("category") || AppCategories.calendar;
 
-  const { data: apps, isLoading } = trpc.viewer.appsRouter.listLocal.useQuery(
+  const { data: apps, isPending } = trpc.viewer.appsRouter.listLocal.useQuery(
     { category },
     { enabled: searchParams !== null }
   );
@@ -291,7 +291,7 @@ const AdminAppsListContainer = () => {
 
   const handleModelOpen = (data: EditModalState) => setModalState({ ...data });
 
-  if (isLoading) return <SkeletonLoader />;
+  if (isPending) return <SkeletonLoader />;
 
   if (!apps || apps.length === 0) {
     return (
diff --git a/packages/features/bookings/Booker/Booker.tsx b/packages/features/bookings/Booker/Booker.tsx
index 32a8199158..2c2694f709 100644
--- a/packages/features/bookings/Booker/Booker.tsx
+++ b/packages/features/bookings/Booker/Booker.tsx
@@ -207,7 +207,7 @@ const BookerComponent = ({
   } = useCalendars();
 
   useEffect(() => {
-    if (event.isLoading) return setBookerState("loading");
+    if (event.isPending) return setBookerState("loading");
     if (!selectedDate) return setBookerState("selecting_date");
     if (!selectedTimeslot) return setBookerState("selecting_time");
     return setBookerState("booking");
@@ -399,7 +399,7 @@ const BookerComponent = ({
               <BookerSection
                 area="meta"
                 className="max-w-screen flex w-full flex-col md:w-[var(--booker-meta-width)]">
-                <EventMeta event={event.data} isLoading={event.isLoading} />
+                <EventMeta event={event.data} isPending={event.isPending} />
                 {layout !== BookerLayouts.MONTH_VIEW &&
                   !(layout === "mobile" && bookerState === "booking") && (
                     <div className="mt-auto px-5 py-3 ">
@@ -434,7 +434,7 @@ const BookerComponent = ({
               visible={layout === BookerLayouts.WEEK_VIEW}
               className="border-subtle sticky top-0 ml-[-1px] h-full md:border-l"
               {...fadeInLeft}>
-              <LargeCalendar extraDays={extraDays} schedule={schedule.data} isLoading={schedule.isLoading} />
+              <LargeCalendar extraDays={extraDays} schedule={schedule.data} isLoading={schedule.isPending} />
             </BookerSection>
 
             <BookerSection
@@ -456,7 +456,7 @@ const BookerComponent = ({
                 extraDays={extraDays}
                 limitHeight={layout === BookerLayouts.MONTH_VIEW}
                 schedule={schedule?.data}
-                isLoading={schedule.isLoading}
+                isLoading={schedule.isPending}
                 seatsPerTimeSlot={event.data?.seatsPerTimeSlot}
                 showAvailableSeatsCount={event.data?.seatsShowAvailabilityCount}
               />
diff --git a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
index 2489fbaa85..cf8f356955 100644
--- a/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
+++ b/packages/features/bookings/Booker/components/BookEventForm/BookEventForm.tsx
@@ -63,7 +63,7 @@ export const BookEventForm = ({
   }, [eventType]);
 
   if (eventQuery.isError) return <Alert severity="warning" message={t("error_booking_event")} />;
-  if (eventQuery.isLoading || !eventQuery.data) return <FormSkeleton />;
+  if (eventQuery.isPending || !eventQuery.data) return <FormSkeleton />;
   if (!timeslot)
     return (
       <EmptyScreen
diff --git a/packages/features/bookings/Booker/components/DatePicker.tsx b/packages/features/bookings/Booker/components/DatePicker.tsx
index dcd97aeeef..24de61b9f8 100644
--- a/packages/features/bookings/Booker/components/DatePicker.tsx
+++ b/packages/features/bookings/Booker/components/DatePicker.tsx
@@ -27,7 +27,7 @@ export const DatePicker = ({
 
   return (
     <DatePickerComponent
-      isLoading={schedule.isLoading}
+      isPending={schedule.isPending}
       onChange={(date: Dayjs | null) => {
         setSelectedDate(date === null ? date : date.format("YYYY-MM-DD"));
       }}
diff --git a/packages/features/bookings/Booker/components/EventMeta.tsx b/packages/features/bookings/Booker/components/EventMeta.tsx
index 1b13fb320c..367a433b5a 100644
--- a/packages/features/bookings/Booker/components/EventMeta.tsx
+++ b/packages/features/bookings/Booker/components/EventMeta.tsx
@@ -24,10 +24,10 @@ const TimezoneSelect = dynamic(
 
 export const EventMeta = ({
   event,
-  isLoading,
+  isPending,
 }: {
   event: useEventReturnType["data"];
-  isLoading: useEventReturnType["isLoading"];
+  isPending: useEventReturnType["isPending"];
 }) => {
   const { setTimezone, timeFormat, timezone } = useTimePreferences();
   const selectedDuration = useBookerStore((state) => state.selectedDuration);
@@ -40,7 +40,6 @@ export const EventMeta = ({
     shallow
   );
   const { i18n, t } = useLocale();
-
   const embedUiConfig = useEmbedUiConfig();
   const isEmbed = useIsEmbed();
   const hideEventTypeDetails = isEmbed ? embedUiConfig.hideEventTypeDetails : false;
@@ -66,12 +65,12 @@ export const EventMeta = ({
 
   return (
     <div className="relative z-10 p-6" data-testid="event-meta">
-      {isLoading && (
+      {isPending && (
         <m.div {...fadeInUp} initial="visible" layout>
           <EventMetaSkeleton />
         </m.div>
       )}
-      {!isLoading && !!event && (
+      {!isPending && !!event && (
         <m.div {...fadeInUp} layout transition={{ ...fadeInUp.transition, delay: 0.3 }}>
           <EventMembers
             schedulingType={event.schedulingType}
diff --git a/packages/features/bookings/Booker/components/LargeCalendar.tsx b/packages/features/bookings/Booker/components/LargeCalendar.tsx
index e73ff6303b..6702b27102 100644
--- a/packages/features/bookings/Booker/components/LargeCalendar.tsx
+++ b/packages/features/bookings/Booker/components/LargeCalendar.tsx
@@ -74,7 +74,7 @@ export const LargeCalendar = ({
   return (
     <div className="h-full [--calendar-dates-sticky-offset:66px]">
       <Calendar
-        isLoading={isLoading}
+        isPending={isLoading}
         availableTimeslots={availableSlots}
         startHour={0}
         endHour={23}
diff --git a/packages/features/bookings/Booker/components/hooks/useBookings.ts b/packages/features/bookings/Booker/components/hooks/useBookings.ts
index 34cceef995..a3c6dab869 100644
--- a/packages/features/bookings/Booker/components/hooks/useBookings.ts
+++ b/packages/features/bookings/Booker/components/hooks/useBookings.ts
@@ -1,6 +1,6 @@
 import { useMutation } from "@tanstack/react-query";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useRef, useState } from "react";
+import { useRef, useState, useEffect } from "react";
 
 import { createPaymentLink } from "@calcom/app-store/stripepayment/lib/client";
 import dayjs from "@calcom/dayjs";
@@ -74,27 +74,33 @@ export const useBookings = ({ event, hashedLink, bookingForm }: IUseBookings) =>
       enabled: !!bookingId && !hasInstantMeetingTokenExpired,
       refetchInterval: 2000,
       refetchIntervalInBackground: true,
-      onSuccess: (data) => {
-        try {
-          showToast(t("something_went_wrong_on_our_end"), "error");
-
-          const locationVideoCallUrl: string | undefined = bookingMetadataSchema.parse(
-            data.booking?.metadata || {}
-          )?.videoCallUrl;
-
-          if (locationVideoCallUrl) {
-            router.push(locationVideoCallUrl);
-          } else {
-            showToast(t("something_went_wrong_on_our_end"), "error");
-          }
-        } catch (err) {
-          showToast(t("something_went_wrong_on_our_end"), "error");
-        }
-      },
     }
   );
+  useEffect(
+    function refactorMeWithoutEffect() {
+      const data = _instantBooking.data;
+      if (!data) return;
+      try {
+        showToast(t("something_went_wrong_on_our_end"), "error");
 
-  const createBookingMutation = useMutation(createBooking, {
+        const locationVideoCallUrl: string | undefined = bookingMetadataSchema.parse(
+          data.booking?.metadata || {}
+        )?.videoCallUrl;
+
+        if (locationVideoCallUrl) {
+          router.push(locationVideoCallUrl);
+        } else {
+          showToast(t("something_went_wrong_on_our_end"), "error");
+        }
+      } catch (err) {
+        showToast(t("something_went_wrong_on_our_end"), "error");
+      }
+    },
+    [_instantBooking.data]
+  );
+
+  const createBookingMutation = useMutation({
+    mutationFn: createBooking,
     onSuccess: (responseData) => {
       const { uid, paymentUid } = responseData;
       const fullName = getFullName(bookingForm.getValues("responses.name"));
@@ -141,7 +147,8 @@ export const useBookings = ({ event, hashedLink, bookingForm }: IUseBookings) =>
     },
   });
 
-  const createInstantBookingMutation = useMutation(createInstantBooking, {
+  const createInstantBookingMutation = useMutation({
+    mutationFn: createInstantBooking,
     onSuccess: (responseData) => {
       updateQueryParam("bookingId", responseData.bookingId);
       setExpiryTime(responseData.expires);
@@ -153,7 +160,8 @@ export const useBookings = ({ event, hashedLink, bookingForm }: IUseBookings) =>
     },
   });
 
-  const createRecurringBookingMutation = useMutation(createRecurringBooking, {
+  const createRecurringBookingMutation = useMutation({
+    mutationFn: createRecurringBooking,
     onSuccess: async (responseData) => {
       const booking = responseData[0] || {};
       const { uid } = booking;
@@ -253,10 +261,10 @@ export const useBookings = ({ event, hashedLink, bookingForm }: IUseBookings) =>
 
   // A redirect is triggered on mutation success, so keep the loading state while it is happening.
   const loadingStates = {
-    creatingBooking: createBookingMutation.isLoading || createBookingMutation.isSuccess,
+    creatingBooking: createBookingMutation.isPending || createBookingMutation.isSuccess,
     creatingRecurringBooking:
-      createRecurringBookingMutation.isLoading || createRecurringBookingMutation.isSuccess,
-    creatingInstantBooking: createInstantBookingMutation.isLoading,
+      createRecurringBookingMutation.isPending || createRecurringBookingMutation.isSuccess,
+    creatingInstantBooking: createInstantBookingMutation.isPending,
   };
 
   return {
diff --git a/packages/features/bookings/Booker/components/hooks/useCalendars.ts b/packages/features/bookings/Booker/components/hooks/useCalendars.ts
index babf7cde5a..3da1b89066 100644
--- a/packages/features/bookings/Booker/components/hooks/useCalendars.ts
+++ b/packages/features/bookings/Booker/components/hooks/useCalendars.ts
@@ -1,5 +1,6 @@
 import { useSession } from "next-auth/react";
 import { useSearchParams } from "next/navigation";
+import { useEffect } from "react";
 import { shallow } from "zustand/shallow";
 
 import { useTimePreferences } from "@calcom/features/bookings/lib";
@@ -30,7 +31,7 @@ export const useCalendars = () => {
     shallow
   );
 
-  const { data: overlayBusyDates } = trpc.viewer.availability.calendarOverlay.useQuery(
+  const { data: overlayBusyDates, isError } = trpc.viewer.availability.calendarOverlay.useQuery(
     {
       loggedInUsersTz: timezone || "Europe/London",
       dateFrom: selectedDate,
@@ -42,13 +43,18 @@ export const useCalendars = () => {
     },
     {
       enabled: !!session && set.size > 0 && switchEnabled,
-      onError: () => {
-        clearSet();
-      },
     }
   );
 
-  const { data, isLoading } = trpc.viewer.connectedCalendars.useQuery(undefined, {
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (!isError) return;
+      clearSet();
+    },
+    [isError]
+  );
+
+  const { data, isPending } = trpc.viewer.connectedCalendars.useQuery(undefined, {
     enabled: !!calendarSettingsOverlay || Boolean(searchParams?.get("overlayCalendar")),
   });
 
@@ -56,7 +62,7 @@ export const useCalendars = () => {
     overlayBusyDates,
     isOverlayCalendarEnabled: switchEnabled,
     connectedCalendars: data?.connectedCalendars || [],
-    loadingConnectedCalendar: isLoading,
+    loadingConnectedCalendar: isPending,
     onToggleCalendar: () => {
       utils.viewer.availability.calendarOverlay.reset();
     },
diff --git a/packages/features/bookings/components/EventTypeFilter.tsx b/packages/features/bookings/components/EventTypeFilter.tsx
index 6d44a8944e..81d8c44a46 100644
--- a/packages/features/bookings/components/EventTypeFilter.tsx
+++ b/packages/features/bookings/components/EventTypeFilter.tsx
@@ -1,5 +1,5 @@
 import { useSession } from "next-auth/react";
-import { Fragment, useState } from "react";
+import { Fragment, useMemo } from "react";
 
 import {
   FilterCheckboxFieldsContainer,
@@ -36,24 +36,24 @@ export const EventTypeFilter = () => {
   const { data: user } = useSession();
   const { data: query, pushItemToKey, removeItemByKeyAndValue, removeAllQueryParams } = useFilterQuery();
 
-  const [groupedEventTypes, setGroupedEventTypes] = useState<GroupedEventTypeState>();
-
   const eventTypes = trpc.viewer.eventTypes.listWithTeam.useQuery(undefined, {
-    onSuccess: (data) => {
-      // Will be handled up the tree to redirect
-      // Group event types by team
-      const grouped = groupBy<IEventTypeFilter>(
-        data.filter((el) => el.team),
-        (item) => item?.team?.name || ""
-      ); // Add the team name
-      const individualEvents = data.filter((el) => !el.team);
-      // push indivdual events to the start of grouped array
-      setGroupedEventTypes(
-        individualEvents.length > 0 ? { user_own_event_types: individualEvents, ...grouped } : grouped
-      );
-    },
     enabled: !!user,
   });
+  const groupedEventTypes: GroupedEventTypeState | null = useMemo(() => {
+    const data = eventTypes.data;
+    if (!data) {
+      return null;
+    }
+    // Will be handled up the tree to redirect
+    // Group event types by team
+    const grouped = groupBy<IEventTypeFilter>(
+      data.filter((el) => el.team),
+      (item) => item?.team?.name || ""
+    ); // Add the team name
+    const individualEvents = data.filter((el) => !el.team);
+    // push indivdual events to the start of grouped array
+    return individualEvents.length > 0 ? { user_own_event_types: individualEvents, ...grouped } : grouped;
+  }, [eventTypes.data]);
 
   if (!eventTypes.data) return null;
   const isEmpty = eventTypes.data.length === 0;
diff --git a/packages/features/bookings/components/VerifyCodeDialog.tsx b/packages/features/bookings/components/VerifyCodeDialog.tsx
index 8c8eece806..9322c95b85 100644
--- a/packages/features/bookings/components/VerifyCodeDialog.tsx
+++ b/packages/features/bookings/components/VerifyCodeDialog.tsx
@@ -30,8 +30,8 @@ export const VerifyCodeDialog = ({
   isUserSessionRequiredToVerify?: boolean;
 }) => {
   const { t } = useLocale();
-  // Not using the mutation isLoading flag because after verifying we submit the underlying org creation form
-  const [isLoading, setIsLoading] = useState(false);
+  // Not using the mutation isPending flag because after verifying we submit the underlying org creation form
+  const [isPending, setIsPending] = useState(false);
   const [error, setError] = useState("");
   const [value, setValue] = useState("");
   const [hasVerified, setHasVerified] = useState(false);
@@ -49,11 +49,11 @@ export const VerifyCodeDialog = ({
 
   const verifyCodeMutationUserSessionRequired = trpc.viewer.organizations.verifyCode.useMutation({
     onSuccess: (data) => {
-      setIsLoading(false);
+      setIsPending(false);
       onSuccess(data);
     },
     onError: (err) => {
-      setIsLoading(false);
+      setIsPending(false);
       setHasVerified(false);
       if (err.message === "invalid_code") {
         setError(t("code_provided_invalid"));
@@ -63,11 +63,11 @@ export const VerifyCodeDialog = ({
 
   const verifyCodeMutationUserSessionNotRequired = trpc.viewer.auth.verifyCodeUnAuthenticated.useMutation({
     onSuccess: (data) => {
-      setIsLoading(false);
+      setIsPending(false);
       onSuccess(data);
     },
     onError: (err) => {
-      setIsLoading(false);
+      setIsPending(false);
       setHasVerified(false);
       if (err.message === "invalid_code") {
         setError(t("code_provided_invalid"));
@@ -77,7 +77,7 @@ export const VerifyCodeDialog = ({
 
   const verifyCode = useCallback(() => {
     setError("");
-    setIsLoading(true);
+    setIsPending(true);
     if (isUserSessionRequiredToVerify) {
       verifyCodeMutationUserSessionRequired.mutate({
         code: value,
@@ -102,10 +102,10 @@ export const VerifyCodeDialog = ({
     // trim the input value because "react-digit-input" creates a string of the given length,
     // even when some digits are missing. And finally we use regex to check if the value consists
     // of 6 non-empty digits.
-    if (hasVerified || error || isLoading || !/^\d{6}$/.test(value.trim())) return;
+    if (hasVerified || error || isPending || !/^\d{6}$/.test(value.trim())) return;
 
     verifyCode();
-  }, [error, isLoading, value, verifyCode, hasVerified]);
+  }, [error, isPending, value, verifyCode, hasVerified]);
 
   useEffect(() => setValue(""), [isOpenDialog]);
 
@@ -149,7 +149,7 @@ export const VerifyCodeDialog = ({
             )}
             <DialogFooter>
               <DialogClose />
-              <Button type="submit" onClick={verifyCode} loading={isLoading}>
+              <Button type="submit" onClick={verifyCode} loading={isPending}>
                 {t("submit")}
               </Button>
             </DialogFooter>
diff --git a/packages/features/calendars/CalendarSwitch.tsx b/packages/features/calendars/CalendarSwitch.tsx
index 996e0fcec9..4cbb86a543 100644
--- a/packages/features/calendars/CalendarSwitch.tsx
+++ b/packages/features/calendars/CalendarSwitch.tsx
@@ -22,14 +22,8 @@ const CalendarSwitch = (props: ICalendarSwitchProps) => {
   const [checkedInternal, setCheckedInternal] = useState(isChecked);
   const utils = trpc.useContext();
   const { t } = useLocale();
-  const mutation = useMutation<
-    unknown,
-    unknown,
-    {
-      isOn: boolean;
-    }
-  >(
-    async ({ isOn }: { isOn: boolean }) => {
+  const mutation = useMutation({
+    mutationFn: async ({ isOn }: { isOn: boolean }) => {
       const body = {
         integration: type,
         externalId: externalId,
@@ -60,24 +54,22 @@ const CalendarSwitch = (props: ICalendarSwitchProps) => {
         }
       }
     },
-    {
-      async onSettled() {
-        await utils.viewer.integrations.invalidate();
-        await utils.viewer.connectedCalendars.invalidate();
-      },
-      onError() {
-        setCheckedInternal(false);
-        showToast(`Something went wrong when toggling "${title}"`, "error");
-      },
-    }
-  );
+    async onSettled() {
+      await utils.viewer.integrations.invalidate();
+      await utils.viewer.connectedCalendars.invalidate();
+    },
+    onError() {
+      setCheckedInternal(false);
+      showToast(`Something went wrong when toggling "${title}"`, "error");
+    },
+  });
   return (
     <div className={classNames("my-2 flex flex-row items-center")}>
       <div className="flex pl-2">
         <Switch
           id={externalId}
           checked={checkedInternal}
-          disabled={mutation.isLoading}
+          disabled={mutation.isPending}
           onCheckedChange={async (isOn: boolean) => {
             setCheckedInternal(isOn);
             await mutation.mutate({ isOn });
@@ -93,7 +85,7 @@ const CalendarSwitch = (props: ICalendarSwitchProps) => {
           {t("adding_events_to")}
         </span>
       )}
-      {mutation.isLoading && <RotateCw className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />}
+      {mutation.isPending && <RotateCw className="text-muted h-4 w-4 animate-spin ltr:ml-1 rtl:mr-1" />}
     </div>
   );
 };
diff --git a/packages/features/calendars/DatePicker.tsx b/packages/features/calendars/DatePicker.tsx
index 84944d8f3c..f824356a8f 100644
--- a/packages/features/calendars/DatePicker.tsx
+++ b/packages/features/calendars/DatePicker.tsx
@@ -36,7 +36,7 @@ export type DatePickerProps = {
   /** allows adding classes to the container */
   className?: string;
   /** Shows a small loading spinner next to the month name */
-  isLoading?: boolean;
+  isPending?: boolean;
   /** used to query the multiple selected dates */
   eventSlug?: string;
 };
@@ -206,7 +206,7 @@ const Days = ({
         <div key={day === null ? `e-${idx}` : `day-${day.format()}`} className="relative w-full pt-[100%]">
           {day === null ? (
             <div key={`e-${idx}`} />
-          ) : props.isLoading ? (
+          ) : props.isPending ? (
             <button
               className="bg-muted text-muted absolute bottom-0 left-0 right-0 top-0 mx-auto flex w-full items-center justify-center rounded-sm border-transparent text-center font-medium opacity-50"
               key={`e-${idx}`}
@@ -226,7 +226,7 @@ const Days = ({
         </div>
       ))}
 
-      {!props.isLoading && includedDates && includedDates?.length === 0 && (
+      {!props.isPending && includedDates && includedDates?.length === 0 && (
         <NoAvailabilityOverlay month={month} nextMonthButton={nextMonthButton} />
       )}
     </>
diff --git a/packages/features/calendars/DestinationCalendarSelector.tsx b/packages/features/calendars/DestinationCalendarSelector.tsx
index dd5db7efb1..44913fb99b 100644
--- a/packages/features/calendars/DestinationCalendarSelector.tsx
+++ b/packages/features/calendars/DestinationCalendarSelector.tsx
@@ -11,7 +11,7 @@ import { Check } from "@calcom/ui/components/icon";
 
 interface Props {
   onChange: (value: { externalId: string; integration: string }) => void;
-  isLoading?: boolean;
+  isPending?: boolean;
   hidePlaceholder?: boolean;
   /** The external Id of the connected calendar */
   destinationCalendar?: DestinationCalendar | null;
@@ -49,7 +49,7 @@ const OptionComponent = ({ ...props }: OptionProps<Option>) => {
 
 const DestinationCalendarSelector = ({
   onChange,
-  isLoading,
+  isPending,
   value,
   hidePlaceholder,
   hideAdvancedText,
@@ -173,7 +173,7 @@ const DestinationCalendarSelector = ({
             externalId,
           });
         }}
-        isLoading={isLoading}
+        isLoading={isPending}
         value={selectedOption}
         components={{ SingleValue: SingleValueComponent, Option: OptionComponent }}
         isMulti={false}
diff --git a/packages/features/calendars/datepicker.stories.mdx b/packages/features/calendars/datepicker.stories.mdx
index 8d48fd9f19..b93c2732cf 100644
--- a/packages/features/calendars/datepicker.stories.mdx
+++ b/packages/features/calendars/datepicker.stories.mdx
@@ -43,7 +43,7 @@ DatePicker component offers a complete and customizable element for the user to
       minDate: dayjs("2023-07-23").utc(),
       maxDate: dayjs("2023-08-30").utc(),
       selected: dayjs("2023-08-30").utc(),
-      isLoading: false,
+      isPending: false,
       onChange: (newDate) => console.log(newDate),
       onMonthChange: (newMonth) => console.log(newMonth),
     }}
@@ -58,7 +58,7 @@ DatePicker component offers a complete and customizable element for the user to
         control: "date"
       }
     }}>
-    {({ weekStart, excludedDates, onChange, onMonthChange, minDate, maxDate, selected, isLoading }) => (
+    {({ weekStart, excludedDates, onChange, onMonthChange, minDate, maxDate, selected, isPending }) => (
       <VariantsTable titles={["Default"]} columnMinWidth={150}>
         <VariantRow variant="Default">
           <DatePicker
@@ -69,7 +69,7 @@ DatePicker component offers a complete and customizable element for the user to
             onChange={onChange}
             onMonthChange={onMonthChange}
             selected={dayjs(selected)}
-            isLoading={isLoading}
+            isPending={isPending}
           />
         </VariantRow>
       </VariantsTable>
diff --git a/packages/features/calendars/weeklyview/components/Calendar.tsx b/packages/features/calendars/weeklyview/components/Calendar.tsx
index 8041aef6d5..ae5fa62ffd 100644
--- a/packages/features/calendars/weeklyview/components/Calendar.tsx
+++ b/packages/features/calendars/weeklyview/components/Calendar.tsx
@@ -58,7 +58,7 @@ export function Calendar(props: CalendarComponentProps) {
           } as React.CSSProperties // This can't live in the css file because it's a dynamic value and css variable gets super
         }>
         {hideHeader !== true && <SchedulerHeading />}
-        {props.isLoading && <Spinner />}
+        {props.isPending && <Spinner />}
         <div
           ref={container}
           className="bg-default dark:bg-muted relative isolate flex h-full flex-auto flex-col">
diff --git a/packages/features/calendars/weeklyview/types/state.ts b/packages/features/calendars/weeklyview/types/state.ts
index c7d91dc6ef..97a0e042c8 100644
--- a/packages/features/calendars/weeklyview/types/state.ts
+++ b/packages/features/calendars/weeklyview/types/state.ts
@@ -121,6 +121,6 @@ export type CalendarState = {
   hideHeader?: boolean;
 };
 
-export type CalendarComponentProps = CalendarPublicActions & CalendarState & { isLoading?: boolean };
+export type CalendarComponentProps = CalendarPublicActions & CalendarState & { isPending?: boolean };
 
 export type CalendarStoreProps = CalendarComponentProps & CalendarPrivateActions;
diff --git a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
index 197f2b17cb..808e560729 100644
--- a/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
+++ b/packages/features/ee/api-keys/components/ApiKeyListItem.tsx
@@ -82,7 +82,7 @@ const ApiKeyListItem = ({
               <DropdownItem
                 type="button"
                 color="destructive"
-                disabled={deleteApiKey.isLoading}
+                disabled={deleteApiKey.isPending}
                 onClick={() =>
                   deleteApiKey.mutate({
                     id: apiKey.id,
diff --git a/packages/features/ee/organizations/components/AboutOrganizationForm.tsx b/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
index aaf8bf7109..df1a3146c2 100644
--- a/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
+++ b/packages/features/ee/organizations/components/AboutOrganizationForm.tsx
@@ -43,7 +43,7 @@ export const AboutOrganizationForm = () => {
         form={aboutOrganizationFormMethods}
         className="space-y-5"
         handleSubmit={(v) => {
-          if (!updateOrganizationMutation.isLoading) {
+          if (!updateOrganizationMutation.isPending) {
             setServerErrorMessage(null);
             updateOrganizationMutation.mutate({ ...v, orgId });
           }
@@ -109,7 +109,7 @@ export const AboutOrganizationForm = () => {
         <div className="flex">
           <Button
             disabled={
-              aboutOrganizationFormMethods.formState.isSubmitting || updateOrganizationMutation.isLoading
+              aboutOrganizationFormMethods.formState.isSubmitting || updateOrganizationMutation.isPending
             }
             color="primary"
             EndIcon={ArrowRight}
diff --git a/packages/features/ee/organizations/components/AddNewTeamsForm.tsx b/packages/features/ee/organizations/components/AddNewTeamsForm.tsx
index 4f9a565236..d9d096b9b5 100644
--- a/packages/features/ee/organizations/components/AddNewTeamsForm.tsx
+++ b/packages/features/ee/organizations/components/AddNewTeamsForm.tsx
@@ -132,7 +132,7 @@ export const AddNewTeamsForm = () => {
           <Button
             StartIcon={Plus}
             color="secondary"
-            disabled={createTeamsMutation.isLoading}
+            disabled={createTeamsMutation.isPending}
             onClick={handleCounterIncrease}
             aria-label={t("add_a_team")}
             className="my-1">
@@ -143,7 +143,7 @@ export const AddNewTeamsForm = () => {
           EndIcon={ArrowRight}
           color="primary"
           className="mt-6 w-full justify-center"
-          disabled={!formState.isValid || createTeamsMutation.isLoading || createTeamsMutation.isSuccess}
+          disabled={!formState.isValid || createTeamsMutation.isPending || createTeamsMutation.isSuccess}
           onClick={handleFormSubmit}>
           {t("continue")}
         </Button>
diff --git a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
index 955778a996..5618e14db1 100644
--- a/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
+++ b/packages/features/ee/organizations/components/CreateANewOrganizationForm.tsx
@@ -80,7 +80,7 @@ export const CreateANewOrganizationForm = ({ slug }: { slug?: string }) => {
         form={newOrganizationFormMethods}
         id="createOrg"
         handleSubmit={(v) => {
-          if (!createOrganizationMutation.isLoading) {
+          if (!createOrganizationMutation.isPending) {
             setServerErrorMessage(null);
             createOrganizationMutation.mutate(v);
           }
@@ -188,7 +188,7 @@ export const CreateANewOrganizationForm = ({ slug }: { slug?: string }) => {
         <div className="flex space-x-2 rtl:space-x-reverse">
           <Button
             disabled={
-              newOrganizationFormMethods.formState.isSubmitting || createOrganizationMutation.isLoading
+              newOrganizationFormMethods.formState.isSubmitting || createOrganizationMutation.isPending
             }
             color="primary"
             EndIcon={ArrowRight}
diff --git a/packages/features/ee/organizations/components/SetPasswordForm.tsx b/packages/features/ee/organizations/components/SetPasswordForm.tsx
index 6511da927e..c4d23e0ee1 100644
--- a/packages/features/ee/organizations/components/SetPasswordForm.tsx
+++ b/packages/features/ee/organizations/components/SetPasswordForm.tsx
@@ -61,7 +61,7 @@ export const SetPasswordForm = () => {
       <Form
         form={setPasswordFormMethods}
         handleSubmit={(v) => {
-          if (!setPasswordMutation.isLoading) {
+          if (!setPasswordMutation.isPending) {
             setServerErrorMessage(null);
             setPasswordMutation.mutate({ newPassword: v.password });
           }
@@ -97,7 +97,7 @@ export const SetPasswordForm = () => {
 
         <div className="flex">
           <Button
-            disabled={setPasswordFormMethods.formState.isSubmitting || setPasswordMutation.isLoading}
+            disabled={setPasswordFormMethods.formState.isSubmitting || setPasswordMutation.isPending}
             color="primary"
             EndIcon={ArrowRight}
             type="submit"
diff --git a/packages/features/ee/organizations/pages/components/OtherTeamList.tsx b/packages/features/ee/organizations/pages/components/OtherTeamList.tsx
index d82c9b5a14..8ad43d9e8c 100644
--- a/packages/features/ee/organizations/pages/components/OtherTeamList.tsx
+++ b/packages/features/ee/organizations/pages/components/OtherTeamList.tsx
@@ -44,7 +44,7 @@ export default function OtherTeamList(props: Props) {
           key={team?.id as number}
           team={team}
           onActionSelect={(action: string) => selectAction(action, team?.id as number)}
-          isLoading={deleteTeamMutation.isLoading}
+          isPending={deleteTeamMutation.isPending}
           hideDropdown={hideDropdown}
           setHideDropdown={setHideDropdown}
         />
diff --git a/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx b/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
index 35b645efe7..cfd7501843 100644
--- a/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
+++ b/packages/features/ee/organizations/pages/components/OtherTeamListItem.tsx
@@ -24,7 +24,7 @@ interface Props {
   team: RouterOutputs["viewer"]["organizations"]["listOtherTeams"][number];
   key: number;
   onActionSelect: (text: string) => void;
-  isLoading?: boolean;
+  isPending?: boolean;
   hideDropdown: boolean;
   setHideDropdown: (value: boolean) => void;
 }
@@ -140,7 +140,7 @@ export default function OtherTeamListItem(props: Props) {
                         variety="danger"
                         title={t("disband_team")}
                         confirmBtnText={t("confirm_disband_team")}
-                        isLoading={props.isLoading}
+                        isPending={props.isPending}
                         onConfirm={() => {
                           props.onActionSelect("disband");
                         }}>
diff --git a/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx b/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx
index 824b2be8ec..aa19f40d51 100644
--- a/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx
+++ b/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx
@@ -1,5 +1,3 @@
-import { useState } from "react";
-
 import SkeletonLoaderTeamList from "@calcom/ee/teams/components/SkeletonloaderTeamList";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -10,21 +8,15 @@ import OtherTeamList from "./OtherTeamList";
 export function OtherTeamsListing() {
   const { t } = useLocale();
 
-  const [errorMessage, setErrorMessage] = useState("");
+  const { data: teams, isPending, error } = trpc.viewer.organizations.listOtherTeams.useQuery();
 
-  const { data: teams, isLoading } = trpc.viewer.organizations.listOtherTeams.useQuery(undefined, {
-    onError: (e) => {
-      setErrorMessage(e.message);
-    },
-  });
-
-  if (isLoading) {
+  if (isPending) {
     return <SkeletonLoaderTeamList />;
   }
 
   return (
     <>
-      {!!errorMessage && <Alert severity="error" title={errorMessage} />}
+      {!!error && <Alert severity="error" title={error.message} />}
 
       {teams && teams.length > 0 ? (
         <OtherTeamList teams={teams} />
diff --git a/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx b/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx
index 620210633e..0ed9cd9019 100644
--- a/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx
+++ b/packages/features/ee/organizations/pages/settings/admin/AdminOrgEditPage.tsx
@@ -98,7 +98,7 @@ const OrgForm = ({
         required
         {...form.register("metadata.orgAutoAcceptEmail")}
       />
-      <Button type="submit" color="primary" loading={mutation.isLoading}>
+      <Button type="submit" color="primary" loading={mutation.isPending}>
         {t("save")}
       </Button>
     </Form>
diff --git a/packages/features/ee/organizations/pages/settings/appearance.tsx b/packages/features/ee/organizations/pages/settings/appearance.tsx
index ada65f378a..2b05dbc047 100644
--- a/packages/features/ee/organizations/pages/settings/appearance.tsx
+++ b/packages/features/ee/organizations/pages/settings/appearance.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
@@ -107,7 +107,7 @@ const OrgAppearanceView = ({
                         calVideoLogo: newLogo,
                       });
                     }}
-                    disabled={mutation.isLoading}
+                    disabled={mutation.isPending}
                     imageSrc={currentOrg?.calVideoLogo ?? undefined}
                     uploadInstruction={t("cal_video_logo_upload_instruction")}
                     triggerButtonColor={currentOrg?.calVideoLogo ? "secondary" : "primary"}
@@ -115,7 +115,7 @@ const OrgAppearanceView = ({
                   {currentOrg?.calVideoLogo && (
                     <Button
                       color="destructive"
-                      disabled={mutation.isLoading}
+                      disabled={mutation.isPending}
                       onClick={() => {
                         mutation.mutate({
                           calVideoLogo: null,
@@ -190,7 +190,7 @@ const OrgAppearanceView = ({
           <SettingsToggle
             toggleSwitchAtTheEnd={true}
             title={t("disable_cal_branding", { appName: APP_NAME })}
-            disabled={mutation?.isLoading}
+            disabled={mutation?.isPending}
             description={t("removes_cal_branding", { appName: APP_NAME })}
             checked={hideBrandingValue}
             onCheckedChange={(checked) => {
@@ -212,13 +212,18 @@ const OrgAppearanceView = ({
 const OrgAppearanceViewWrapper = () => {
   const router = useRouter();
   const { t } = useLocale();
-  const { data: currentOrg, isLoading } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {
-    onError: () => {
-      router.push("/settings");
-    },
-  });
+  const { data: currentOrg, isPending, error } = trpc.viewer.organizations.listCurrent.useQuery();
 
-  if (isLoading) {
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (error) {
+        router.push("/settings");
+      }
+    },
+    [error]
+  );
+
+  if (isPending) {
     return <AppearanceSkeletonLoader title={t("appearance")} description={t("appearance_org_description")} />;
   }
 
diff --git a/packages/features/ee/organizations/pages/settings/general.tsx b/packages/features/ee/organizations/pages/settings/general.tsx
index 7f3064d8f8..83cc338a91 100644
--- a/packages/features/ee/organizations/pages/settings/general.tsx
+++ b/packages/features/ee/organizations/pages/settings/general.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
@@ -50,14 +51,23 @@ const OrgGeneralView = () => {
   const { t } = useLocale();
   const router = useRouter();
 
-  const { data: currentOrg, isLoading } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {
-    onError: () => {
-      router.push("/settings");
-    },
-  });
+  const {
+    data: currentOrg,
+    isPending,
+    error,
+  } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {});
   const { data: user } = trpc.viewer.me.useQuery();
 
-  if (isLoading) return <SkeletonLoader title={t("general")} description={t("general_description")} />;
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (error) {
+        router.push("/settings");
+      }
+    },
+    [error]
+  );
+
+  if (isPending) return <SkeletonLoader title={t("general")} description={t("general_description")} />;
   if (!currentOrg) {
     return null;
   }
diff --git a/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx b/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx
index 293675a190..a40a233fe4 100644
--- a/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/other-team-members-view.tsx
@@ -1,9 +1,10 @@
 "use client";
 
 // import { debounce } from "lodash";
+import { keepPreviousData } from "@tanstack/react-query";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import MemberInvitationModal from "@calcom/ee/teams/components/MemberInvitationModal";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -71,20 +72,21 @@ const MembersView = () => {
   // const [queryToFetch, setQueryToFetch] = useState<string | undefined>("");
   const limit = 20;
   const [showMemberInvitationModal, setShowMemberInvitationModal] = useState<boolean>(false);
-  const [members, setMembers] = useState<Members>([]);
+
   const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {
     enabled: !!session.data?.user?.org,
   });
-  const { data: team, isLoading: isTeamLoading } = trpc.viewer.organizations.getOtherTeam.useQuery(
+  const {
+    data: team,
+    isPending: isTeamLoading,
+    error: otherTeamError,
+  } = trpc.viewer.organizations.getOtherTeam.useQuery(
     { teamId },
     {
       enabled: !Number.isNaN(teamId),
-      onError: () => {
-        router.push("/settings");
-      },
     }
   );
-  const { data: orgMembersNotInThisTeam, isLoading: isOrgListLoading } =
+  const { data: orgMembersNotInThisTeam, isPending: isOrgListLoading } =
     trpc.viewer.organizations.getMembers.useQuery(
       {
         teamIdToExclude: teamId,
@@ -95,24 +97,40 @@ const MembersView = () => {
       }
     );
 
-  const { fetchNextPage, isFetchingNextPage, hasNextPage } =
-    trpc.viewer.organizations.listOtherTeamMembers.useInfiniteQuery(
-      { teamId, limit },
-      {
-        onSuccess: (data) => {
-          const flatData = data?.pages?.flatMap((page) => page.rows) as Members;
-          setMembers(flatData);
-        },
-        enabled: !Number.isNaN(teamId),
-        onError: () => {
-          router.push("/settings");
-        },
-        getNextPageParam: (lastPage) => lastPage.nextCursor,
-        keepPreviousData: true,
-      }
-    );
+  const {
+    fetchNextPage,
+    isFetchingNextPage,
+    hasNextPage,
+    error: otherMembersError,
+    data,
+  } = trpc.viewer.organizations.listOtherTeamMembers.useInfiniteQuery(
+    { teamId, limit },
+    {
+      enabled: !Number.isNaN(teamId),
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+      placeholderData: keepPreviousData,
+    }
+  );
 
-  const isLoading = isTeamLoading || isOrgListLoading;
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (otherMembersError || otherTeamError) {
+        router.push("/settings");
+      }
+    },
+    [otherMembersError, otherTeamError]
+  );
+
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (data) {
+        router.push("/settings");
+      }
+    },
+    [data]
+  );
+
+  const isPending = isTeamLoading || isOrgListLoading;
   const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation({
     onSuccess: () => {
       utils.viewer.organizations.getMembers.invalidate();
@@ -147,7 +165,7 @@ const MembersView = () => {
           )
         }
       />
-      {!isLoading && (
+      {!isPending && (
         <>
           <div>
             <>
@@ -163,7 +181,7 @@ const MembersView = () => {
                 placeholder={`${t("search")}...`}
               /> */}
               <MembersList
-                members={members}
+                members={data?.pages?.flatMap((page) => page.rows) ?? []}
                 team={team}
                 fetchNextPage={fetchNextPage}
                 hasNextPage={hasNextPage}
@@ -180,7 +198,7 @@ const MembersView = () => {
           </div>
           {showMemberInvitationModal && team && (
             <MemberInvitationModal
-              isLoading={inviteMemberMutation.isLoading}
+              isPending={inviteMemberMutation.isPending}
               isOpen={showMemberInvitationModal}
               orgMembers={orgMembersNotInThisTeam}
               teamId={team.id}
diff --git a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
index 69a3a9c567..ce17bb8403 100644
--- a/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
+++ b/packages/features/ee/organizations/pages/settings/other-team-profile-view.tsx
@@ -5,7 +5,7 @@ import type { Prisma } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useState, useLayoutEffect } from "react";
+import { useState, useLayoutEffect, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -18,7 +18,6 @@ import { markdownToSafeHTML } from "@calcom/lib/markdownToSafeHTML";
 import objectKeys from "@calcom/lib/objectKeys";
 import slugify from "@calcom/lib/slugify";
 import turndown from "@calcom/lib/turndownService";
-import type { RouterOutputs } from "@calcom/trpc/react";
 import { trpc } from "@calcom/trpc/react";
 import { SkeletonContainer, SkeletonText } from "@calcom/ui";
 import {
@@ -81,26 +80,39 @@ const OtherTeamProfileView = () => {
   });
   const params = useParamsWithFallback();
   const teamId = Number(params.id);
-  const { data: team, isLoading } = trpc.viewer.organizations.getOtherTeam.useQuery(
+  const {
+    data: team,
+    isPending,
+    error: teamError,
+  } = trpc.viewer.organizations.getOtherTeam.useQuery(
     { teamId: teamId },
     {
       enabled: !Number.isNaN(teamId),
-      onError: () => {
-        router.push("/settings");
-      },
-      onSuccess: (team: RouterOutputs["viewer"]["organizations"]["getOtherTeam"]) => {
-        if (team) {
-          form.setValue("name", team.name || "");
-          form.setValue("slug", team.slug || "");
-          form.setValue("logo", team.logo || "");
-          form.setValue("bio", team.bio || "");
-          if (team.slug === null && (team?.metadata as Prisma.JsonObject)?.requestedSlug) {
-            form.setValue("slug", ((team?.metadata as Prisma.JsonObject)?.requestedSlug as string) || "");
-          }
-        }
-      },
     }
   );
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (teamError) {
+        router.push("/settings");
+      }
+    },
+    [teamError]
+  );
+
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (team) {
+        form.setValue("name", team.name || "");
+        form.setValue("slug", team.slug || "");
+        form.setValue("logo", team.logo || "");
+        form.setValue("bio", team.bio || "");
+        if (team.slug === null && (team?.metadata as Prisma.JsonObject)?.requestedSlug) {
+          form.setValue("slug", ((team?.metadata as Prisma.JsonObject)?.requestedSlug as string) || "");
+        }
+      }
+    },
+    [team]
+  );
 
   // This page can only be accessed by team admins (owner/admin)
   const isAdmin = true;
@@ -157,7 +169,7 @@ const OtherTeamProfileView = () => {
   return (
     <>
       <Meta title={t("profile")} description={t("profile_team_description")} />
-      {!isLoading ? (
+      {!isPending ? (
         <>
           {isAdmin ? (
             <Form
@@ -249,7 +261,7 @@ const OtherTeamProfileView = () => {
                 />
               </div>
               <p className="text-default mt-2 text-sm">{t("team_description")}</p>
-              <Button color="primary" className="mt-8" type="submit" loading={mutation.isLoading}>
+              <Button color="primary" className="mt-8" type="submit" loading={mutation.isPending}>
                 {t("update")}
               </Button>
               {IS_TEAM_BILLING_ENABLED &&
diff --git a/packages/features/ee/organizations/pages/settings/profile.tsx b/packages/features/ee/organizations/pages/settings/profile.tsx
index 6dd7a266c3..9639b39ca5 100644
--- a/packages/features/ee/organizations/pages/settings/profile.tsx
+++ b/packages/features/ee/organizations/pages/settings/profile.tsx
@@ -4,7 +4,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import type { Prisma } from "@prisma/client";
 import { LinkIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
-import { useState, useLayoutEffect } from "react";
+import { useState, useLayoutEffect, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -79,13 +79,22 @@ const OrgProfileView = () => {
     document.body.focus();
   }, []);
 
-  const { data: currentOrganisation, isLoading } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {
-    onError: () => {
-      router.push("/settings");
-    },
-  });
+  const {
+    data: currentOrganisation,
+    isPending,
+    error,
+  } = trpc.viewer.organizations.listCurrent.useQuery(undefined, {});
 
-  if (isLoading || !orgBranding || !currentOrganisation) {
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (error) {
+        router.push("/settings");
+      }
+    },
+    [error]
+  );
+
+  if (isPending || !orgBranding || !currentOrganisation) {
     return <SkeletonLoader title={t("profile")} description={t("profile_org_description")} />;
   }
 
@@ -286,7 +295,7 @@ const OrgProfileForm = ({ defaultValues }: { defaultValues: FormValues }) => {
         <p className="text-default mt-2 text-sm">{t("org_description")}</p>
       </div>
       <SectionBottomActions align="end">
-        <Button color="primary" type="submit" loading={mutation.isLoading} disabled={isDisabled}>
+        <Button color="primary" type="submit" loading={mutation.isPending} disabled={isDisabled}>
           {t("update")}
         </Button>
       </SectionBottomActions>
diff --git a/packages/features/ee/sso/components/SSOConfiguration.tsx b/packages/features/ee/sso/components/SSOConfiguration.tsx
index 5b74f626ca..0a88724b26 100644
--- a/packages/features/ee/sso/components/SSOConfiguration.tsx
+++ b/packages/features/ee/sso/components/SSOConfiguration.tsx
@@ -1,5 +1,3 @@
-import { useState } from "react";
-
 import ConnectionInfo from "@calcom/ee/sso/components/ConnectionInfo";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import OIDCConnection from "@calcom/features/ee/sso/components/OIDCConnection";
@@ -22,23 +20,15 @@ const SkeletonLoader = ({ title, description }: { title: string; description: st
 };
 
 export default function SSOConfiguration({ teamId }: { teamId: number | null }) {
-  const [errorMessage, setErrorMessage] = useState("");
   const { t } = useLocale();
 
-  const { data: connection, isLoading } = trpc.viewer.saml.get.useQuery(
-    { teamId },
-    {
-      onError: (err) => {
-        setErrorMessage(err.message);
-      },
-    }
-  );
+  const { data: connection, isPending, error } = trpc.viewer.saml.get.useQuery({ teamId });
 
-  if (isLoading) {
+  if (isPending) {
     return <SkeletonLoader title={t("sso_configuration")} description={t("sso_configuration_description")} />;
   }
 
-  if (errorMessage) {
+  if (error) {
     return (
       <>
         <Meta
@@ -46,7 +36,7 @@ export default function SSOConfiguration({ teamId }: { teamId: number | null })
           description={t("sso_configuration_description")}
           borderInShellHeader={true}
         />
-        <Alert severity="warning" message={t(errorMessage)} className="mt-4" />
+        <Alert severity="warning" message={t(error.message)} className="mt-4" />
       </>
     );
   }
diff --git a/packages/features/ee/sso/page/teams-sso-view.tsx b/packages/features/ee/sso/page/teams-sso-view.tsx
index 73829f1acd..aecc1d0578 100644
--- a/packages/features/ee/sso/page/teams-sso-view.tsx
+++ b/packages/features/ee/sso/page/teams-sso-view.tsx
@@ -19,14 +19,7 @@ const SAMLSSO = () => {
 
   const teamId = Number(params.id);
 
-  const { data: team, isLoading } = trpc.viewer.teams.get.useQuery(
-    { teamId },
-    {
-      onError: () => {
-        router.push("/settings");
-      },
-    }
-  );
+  const { data: team, isPending, error } = trpc.viewer.teams.get.useQuery({ teamId });
 
   useEffect(() => {
     if (!HOSTED_CAL_FEATURES) {
@@ -34,7 +27,15 @@ const SAMLSSO = () => {
     }
   }, []);
 
-  if (isLoading) {
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (error) {
+        router.push("/settings");
+      }
+    },
+    [error]
+  );
+  if (isPending) {
     return <SkeletonLoader />;
   }
 
diff --git a/packages/features/ee/support/components/HelpMenuItem.tsx b/packages/features/ee/support/components/HelpMenuItem.tsx
index bd7905f37f..511879cece 100644
--- a/packages/features/ee/support/components/HelpMenuItem.tsx
+++ b/packages/features/ee/support/components/HelpMenuItem.tsx
@@ -166,7 +166,7 @@ export default function HelpMenuItem({ onHelpItemSelect }: HelpMenuItemProps) {
         <div className="my-2 flex justify-end">
           <Button
             disabled={disableSubmit}
-            loading={mutation.isLoading}
+            loading={mutation.isPending}
             onClick={async () => {
               if (rating && comment) {
                 await sendFeedback(rating, comment);
diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
index be2397de26..601cd6396c 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -79,7 +79,7 @@ export const AddNewTeamMembersForm = ({
   const [memberInviteModal, setMemberInviteModal] = useState(showDialog);
   const [inviteLinkSettingsModal, setInviteLinkSettingsModal] = useState(false);
 
-  const { data: team, isLoading } = trpc.viewer.teams.get.useQuery({ teamId, isOrg }, { enabled: !!teamId });
+  const { data: team, isPending } = trpc.viewer.teams.get.useQuery({ teamId, isOrg }, { enabled: !!teamId });
   const { data: orgMembersNotInThisTeam } = trpc.viewer.organizations.getMembers.useQuery(
     {
       teamIdToExclude: teamId,
@@ -126,12 +126,12 @@ export const AddNewTeamMembersForm = ({
           {isOrg ? t("add_org_members") : t("add_team_member")}
         </Button>
       </div>
-      {isLoading ? (
+      {isPending ? (
         <SkeletonButton />
       ) : (
         <>
           <MemberInvitationModal
-            isLoading={inviteMemberMutation.isLoading}
+            isPending={inviteMemberMutation.isPending}
             isOpen={memberInviteModal}
             orgMembers={orgMembersNotInThisTeam}
             teamId={teamId}
@@ -199,7 +199,7 @@ export const AddNewTeamMembersForm = ({
         EndIcon={!orgBranding || isOrg ? ArrowRight : undefined}
         color="primary"
         className="w-full justify-center"
-        disabled={publishTeamMutation.isLoading}
+        disabled={publishTeamMutation.isPending}
         onClick={() => {
           let uri = `/settings/teams/${teamId}/profile`;
           if (isOrg) {
diff --git a/packages/features/ee/teams/components/CreateANewTeamForm.tsx b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
index 4c3d62f723..c4a395dbbc 100644
--- a/packages/features/ee/teams/components/CreateANewTeamForm.tsx
+++ b/packages/features/ee/teams/components/CreateANewTeamForm.tsx
@@ -71,7 +71,7 @@ export const CreateANewTeamForm = () => {
       <Form
         form={newTeamFormMethods}
         handleSubmit={(v) => {
-          if (!createTeamMutation.isLoading) {
+          if (!createTeamMutation.isPending) {
             setServerErrorMessage(null);
             createTeamMutation.mutate(v);
           }
@@ -95,7 +95,7 @@ export const CreateANewTeamForm = () => {
                 <TextField
                   disabled={
                     /* E2e is too fast and it tries to fill this way before the form is ready */
-                    !isLocaleReady || createTeamMutation.isLoading
+                    !isLocaleReady || createTeamMutation.isPending
                   }
                   className="mt-2"
                   placeholder="Acme Inc."
@@ -146,14 +146,14 @@ export const CreateANewTeamForm = () => {
 
         <div className="flex space-x-2 rtl:space-x-reverse">
           <Button
-            disabled={createTeamMutation.isLoading}
+            disabled={createTeamMutation.isPending}
             color="secondary"
             href={returnToParam}
             className="w-full justify-center">
             {t("cancel")}
           </Button>
           <Button
-            disabled={newTeamFormMethods.formState.isSubmitting || createTeamMutation.isLoading}
+            disabled={newTeamFormMethods.formState.isSubmitting || createTeamMutation.isPending}
             color="primary"
             EndIcon={ArrowRight}
             type="submit"
diff --git a/packages/features/ee/teams/components/DisableTeamImpersonation.tsx b/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
index 7e27a7c355..3549612074 100644
--- a/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
+++ b/packages/features/ee/teams/components/DisableTeamImpersonation.tsx
@@ -26,14 +26,14 @@ const DisableTeamImpersonation = ({
     },
   });
   const [allowImpersonation, setAllowImpersonation] = useState(!query.data?.disableImpersonation ?? true);
-  if (query.isLoading) return <></>;
+  if (query.isPending) return <></>;
 
   return (
     <>
       <SettingsToggle
         toggleSwitchAtTheEnd={true}
         title={t("user_impersonation_heading")}
-        disabled={disabled || mutation?.isLoading}
+        disabled={disabled || mutation?.isPending}
         description={t("team_impersonation_description")}
         checked={allowImpersonation}
         onCheckedChange={(_allowImpersonation) => {
diff --git a/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx b/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
index 67e5b8af0a..65d67dbb54 100644
--- a/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
+++ b/packages/features/ee/teams/components/GoogleWorkspaceInviteButton.tsx
@@ -76,14 +76,14 @@ export function GoogleWorkspaceInviteButton(
             }}
             className="w-full justify-center gap-2"
             StartIcon={UsersIcon}
-            loading={mutation.isLoading}>
+            loading={mutation.isPending}>
             {t("import_from_google_workspace")}
           </Button>
         </Tooltip>
         <Tooltip content="Remove workspace connection">
           <Button
             color="secondary"
-            loading={removeConnectionMutation.isLoading}
+            loading={removeConnectionMutation.isPending}
             StartIcon={XIcon}
             onClick={() => {
               removeConnectionMutation.mutate();
diff --git a/packages/features/ee/teams/components/MakeTeamPrivateSwitch.tsx b/packages/features/ee/teams/components/MakeTeamPrivateSwitch.tsx
index 3a1bd4a368..26450caf97 100644
--- a/packages/features/ee/teams/components/MakeTeamPrivateSwitch.tsx
+++ b/packages/features/ee/teams/components/MakeTeamPrivateSwitch.tsx
@@ -34,7 +34,7 @@ const MakeTeamPrivateSwitch = ({
       <SettingsToggle
         toggleSwitchAtTheEnd={true}
         title={t("make_team_private")}
-        disabled={disabled || mutation?.isLoading}
+        disabled={disabled || mutation?.isPending}
         description={t("make_team_private_description")}
         checked={isTeamPrivate}
         onCheckedChange={(checked) => {
diff --git a/packages/features/ee/teams/components/MemberInvitationModal.tsx b/packages/features/ee/teams/components/MemberInvitationModal.tsx
index e114e2d340..47b1c5255d 100644
--- a/packages/features/ee/teams/components/MemberInvitationModal.tsx
+++ b/packages/features/ee/teams/components/MemberInvitationModal.tsx
@@ -41,7 +41,7 @@ type MemberInvitationModalProps = {
   teamId: number;
   members?: PendingMember[];
   token?: string;
-  isLoading?: boolean;
+  isPending?: boolean;
   disableCopyLink?: boolean;
   isOrg?: boolean;
 };
@@ -428,7 +428,7 @@ export default function MemberInvitationModal(props: MemberInvitationModalProps)
               {t("cancel")}
             </Button>
             <Button
-              loading={props.isLoading || createInviteMutation.isLoading}
+              loading={props.isPending || createInviteMutation.isPending}
               type="submit"
               color="primary"
               className="me-2 ms-2"
diff --git a/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx b/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
index a2c492546e..9cbf873886 100644
--- a/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
+++ b/packages/features/ee/teams/components/TeamAvailabilityTimes.tsx
@@ -22,7 +22,7 @@ interface Props {
 export default function TeamAvailabilityTimes(props: Props) {
   const { t } = useLocale();
 
-  const { data, isLoading } = trpc.viewer.teams.getMemberAvailability.useQuery(
+  const { data, isPending } = trpc.viewer.teams.getMemberAvailability.useQuery(
     {
       teamId: props.teamId,
       memberId: props.memberId,
@@ -35,7 +35,7 @@ export default function TeamAvailabilityTimes(props: Props) {
     }
   );
 
-  const slots = !isLoading
+  const slots = !isPending
     ? getSlots({
         frequency: props.frequency,
         inviteeDate: props.selectedDate,
@@ -50,13 +50,13 @@ export default function TeamAvailabilityTimes(props: Props) {
   return (
     <div className={classNames("min-w-60 flex-grow pl-0", props.className)}>
       {props.HeaderComponent}
-      {isLoading && slots.length === 0 && <SkeletonLoader />}
-      {!isLoading && slots.length === 0 ? (
+      {isPending && slots.length === 0 && <SkeletonLoader />}
+      {!isPending && slots.length === 0 ? (
         <div className="flex flex-col items-center justify-center pt-4">
           <span className="text-subtle text-sm">{t("no_available_slots")}</span>
         </div>
       ) : (
-        <>{!isLoading && <p className="text-default mb-3 text-sm">{t("time_available")}</p>}</>
+        <>{!isPending && <p className="text-default mb-3 text-sm">{t("time_available")}</p>}</>
       )}
       <div className="max-h-[390px] overflow-scroll">
         {slots.map((slot) => (
diff --git a/packages/features/ee/teams/components/TeamInviteList.tsx b/packages/features/ee/teams/components/TeamInviteList.tsx
index eafcb332cc..ba4908f149 100644
--- a/packages/features/ee/teams/components/TeamInviteList.tsx
+++ b/packages/features/ee/teams/components/TeamInviteList.tsx
@@ -54,7 +54,7 @@ export default function TeamInviteList(props: Props) {
             key={team?.id as number}
             team={team}
             onActionSelect={(action: string) => selectAction(action, team?.id as number)}
-            isLoading={deleteTeamMutation.isLoading}
+            isPending={deleteTeamMutation.isPending}
             hideDropdown={hideDropdown}
             setHideDropdown={setHideDropdown}
           />
diff --git a/packages/features/ee/teams/components/TeamInviteListItem.tsx b/packages/features/ee/teams/components/TeamInviteListItem.tsx
index 9c6ed6e727..8c55dd287a 100644
--- a/packages/features/ee/teams/components/TeamInviteListItem.tsx
+++ b/packages/features/ee/teams/components/TeamInviteListItem.tsx
@@ -27,7 +27,7 @@ interface Props {
   };
   key: number;
   onActionSelect: (text: string) => void;
-  isLoading?: boolean;
+  isPending?: boolean;
   hideDropdown: boolean;
   setHideDropdown: (value: boolean) => void;
 }
diff --git a/packages/features/ee/teams/components/TeamList.tsx b/packages/features/ee/teams/components/TeamList.tsx
index ee2918e80d..4f31e64ed2 100644
--- a/packages/features/ee/teams/components/TeamList.tsx
+++ b/packages/features/ee/teams/components/TeamList.tsx
@@ -49,7 +49,7 @@ export default function TeamList(props: Props) {
           key={team?.id as number}
           team={team}
           onActionSelect={(action: string) => selectAction(action, team?.id as number)}
-          isLoading={deleteTeamMutation.isLoading}
+          isPending={deleteTeamMutation.isPending}
           hideDropdown={hideDropdown}
           setHideDropdown={setHideDropdown}
         />
diff --git a/packages/features/ee/teams/components/TeamListItem.tsx b/packages/features/ee/teams/components/TeamListItem.tsx
index 0eb04d4140..258a3e8c7d 100644
--- a/packages/features/ee/teams/components/TeamListItem.tsx
+++ b/packages/features/ee/teams/components/TeamListItem.tsx
@@ -49,7 +49,7 @@ interface Props {
   team: RouterOutputs["viewer"]["teams"]["list"][number];
   key: number;
   onActionSelect: (text: string) => void;
-  isLoading?: boolean;
+  isPending?: boolean;
   hideDropdown: boolean;
   setHideDropdown: (value: boolean) => void;
 }
@@ -125,7 +125,7 @@ export default function TeamListItem(props: Props) {
         onExit={() => {
           setOpenMemberInvitationModal(false);
         }}
-        isLoading={inviteMemberMutation.isLoading}
+        isPending={inviteMemberMutation.isPending}
         onSubmit={(values, resetFields) => {
           inviteMemberMutation.mutate(
             {
@@ -322,7 +322,7 @@ export default function TeamListItem(props: Props) {
                             variety="danger"
                             title={t("disband_team")}
                             confirmBtnText={t("confirm_disband_team")}
-                            isLoading={props.isLoading}
+                            isPending={props.isPending}
                             onConfirm={() => {
                               props.onActionSelect("disband");
                             }}>
diff --git a/packages/features/ee/teams/components/TeamsListing.tsx b/packages/features/ee/teams/components/TeamsListing.tsx
index 53fa8b4b94..84d0576159 100644
--- a/packages/features/ee/teams/components/TeamsListing.tsx
+++ b/packages/features/ee/teams/components/TeamsListing.tsx
@@ -20,13 +20,9 @@ export function TeamsListing() {
   const router = useRouter();
 
   const [inviteTokenChecked, setInviteTokenChecked] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("");
 
-  const { data, isLoading } = trpc.viewer.teams.list.useQuery(undefined, {
+  const { data, isPending, error } = trpc.viewer.teams.list.useQuery(undefined, {
     enabled: inviteTokenChecked,
-    onError: (e) => {
-      setErrorMessage(e.message);
-    },
   });
 
   const { data: user } = trpc.viewer.me.useQuery();
@@ -88,13 +84,13 @@ export function TeamsListing() {
     else setInviteTokenChecked(true);
   }, [router, inviteMemberByToken, setInviteTokenChecked, token]);
 
-  if (isLoading || !inviteTokenChecked) {
+  if (isPending || !inviteTokenChecked) {
     return <SkeletonLoaderTeamList />;
   }
 
   return (
     <>
-      {!!errorMessage && <Alert severity="error" title={errorMessage} />}
+      {!!error && <Alert severity="error" title={error.message} />}
 
       {invites.length > 0 && (
         <div className="bg-subtle mb-6 rounded-md p-5">
diff --git a/packages/features/ee/teams/pages/team-appearance-view.tsx b/packages/features/ee/teams/pages/team-appearance-view.tsx
index e28ee15455..4cc29f366d 100644
--- a/packages/features/ee/teams/pages/team-appearance-view.tsx
+++ b/packages/features/ee/teams/pages/team-appearance-view.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 
 import BrandColorsForm from "@calcom/features/ee/components/BrandColorsForm";
@@ -151,7 +151,7 @@ const ProfileView = ({ team }: ProfileViewProps) => {
             <SettingsToggle
               toggleSwitchAtTheEnd={true}
               title={t("disable_cal_branding", { appName: APP_NAME })}
-              disabled={mutation?.isLoading}
+              disabled={mutation?.isPending}
               description={t("removes_cal_branding", { appName: APP_NAME })}
               checked={hideBrandingValue}
               onCheckedChange={(checked) => {
@@ -163,7 +163,7 @@ const ProfileView = ({ team }: ProfileViewProps) => {
             <SettingsToggle
               toggleSwitchAtTheEnd={true}
               title={t("hide_book_a_team_member")}
-              disabled={mutation?.isLoading}
+              disabled={mutation?.isPending}
               description={t("hide_book_a_team_member_description", { appName: APP_NAME })}
               checked={hideBookATeamMember ?? false}
               onCheckedChange={(checked) => {
@@ -188,16 +188,18 @@ const ProfileViewWrapper = () => {
 
   const { t } = useLocale();
 
-  const { data: team, isLoading } = trpc.viewer.teams.get.useQuery(
-    { teamId: Number(params.id) },
-    {
-      onError: () => {
+  const { data: team, isPending, error } = trpc.viewer.teams.get.useQuery({ teamId: Number(params.id) });
+
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (error) {
         router.push("/settings");
-      },
-    }
+      }
+    },
+    [error]
   );
 
-  if (isLoading)
+  if (isPending)
     return (
       <AppearanceSkeletonLoader title={t("appearance")} description={t("appearance_team_description")} />
     );
diff --git a/packages/features/ee/teams/pages/team-members-view.tsx b/packages/features/ee/teams/pages/team-members-view.tsx
index 3c142c36ab..fdc061188b 100644
--- a/packages/features/ee/teams/pages/team-members-view.tsx
+++ b/packages/features/ee/teams/pages/team-members-view.tsx
@@ -2,7 +2,7 @@
 
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 
 import { useCompatSearchParams } from "@calcom/lib/hooks/useCompatSearchParams";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -94,7 +94,7 @@ const MembersView = () => {
     enabled: !!session.data?.user?.org,
   });
 
-  const { data: orgMembersNotInThisTeam, isLoading: isOrgListLoading } =
+  const { data: orgMembersNotInThisTeam, isPending: isOrgListLoading } =
     trpc.viewer.organizations.getMembers.useQuery(
       {
         teamIdToExclude: teamId,
@@ -105,17 +105,26 @@ const MembersView = () => {
       }
     );
 
-  const { data: team, isLoading: isTeamsLoading } = trpc.viewer.teams.get.useQuery(
+  const {
+    data: team,
+    isPending: isTeamsLoading,
+    error: teamError,
+  } = trpc.viewer.teams.get.useQuery(
     { teamId },
     {
       enabled: !!teamId,
-      onError: () => {
-        router.push("/settings");
-      },
     }
   );
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (teamError) {
+        router.push("/settings");
+      }
+    },
+    [teamError]
+  );
 
-  const isLoading = isOrgListLoading || isTeamsLoading;
+  const isPending = isOrgListLoading || isTeamsLoading;
 
   const inviteMemberMutation = trpc.viewer.teams.inviteMember.useMutation();
 
@@ -149,7 +158,7 @@ const MembersView = () => {
           )
         }
       />
-      {!isLoading && (
+      {!isPending && (
         <>
           <div>
             {team && (
@@ -190,7 +199,7 @@ const MembersView = () => {
           </div>
           {showMemberInvitationModal && team && (
             <MemberInvitationModal
-              isLoading={inviteMemberMutation.isLoading}
+              isPending={inviteMemberMutation.isPending}
               isOpen={showMemberInvitationModal}
               orgMembers={orgMembersNotInThisTeam}
               members={team.members}
diff --git a/packages/features/ee/teams/pages/team-profile-view.tsx b/packages/features/ee/teams/pages/team-profile-view.tsx
index d0dff783d4..06dd2c8d55 100644
--- a/packages/features/ee/teams/pages/team-profile-view.tsx
+++ b/packages/features/ee/teams/pages/team-profile-view.tsx
@@ -5,7 +5,7 @@ import type { Prisma } from "@prisma/client";
 import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useLayoutEffect, useState } from "react";
+import { useLayoutEffect, useState, useEffect } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { z } from "zod";
 
@@ -93,16 +93,25 @@ const ProfileView = () => {
     document.body.focus();
   }, []);
 
-  const { data: team, isLoading } = trpc.viewer.teams.get.useQuery(
+  const {
+    data: team,
+    isPending,
+    error,
+  } = trpc.viewer.teams.get.useQuery(
     { teamId, includeTeamLogo: true },
     {
       enabled: !!teamId,
-      onError: () => {
-        router.push("/settings");
-      },
     }
   );
 
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (error) {
+        router.push("/settings");
+      }
+    },
+    [error]
+  );
   const isAdmin =
     team && (team.membership.role === MembershipRole.OWNER || team.membership.role === MembershipRole.ADMIN);
 
@@ -142,7 +151,7 @@ const ProfileView = () => {
       });
   }
 
-  if (isLoading) {
+  if (isPending) {
     return <SkeletonLoader title={t("profile")} description={t("profile_team_description")} />;
   }
 
@@ -405,7 +414,7 @@ const TeamProfileForm = ({ team }: TeamProfileFormProps) => {
         <p className="text-default mt-2 text-sm">{t("team_description")}</p>
       </div>
       <SectionBottomActions align="end">
-        <Button color="primary" type="submit" loading={mutation.isLoading} disabled={isDisabled}>
+        <Button color="primary" type="submit" loading={mutation.isPending} disabled={isDisabled}>
           {t("update")}
         </Button>
         {IS_TEAM_BILLING_ENABLED &&
diff --git a/packages/features/ee/users/components/UsersTable.tsx b/packages/features/ee/users/components/UsersTable.tsx
index 5e39dbed95..20f4f27ac0 100644
--- a/packages/features/ee/users/components/UsersTable.tsx
+++ b/packages/features/ee/users/components/UsersTable.tsx
@@ -1,3 +1,4 @@
+import { keepPreviousData } from "@tanstack/react-query";
 import { signIn } from "next-auth/react";
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -76,7 +77,7 @@ function UsersTableBare() {
     },
     {
       getNextPageParam: (lastPage) => lastPage.nextCursor,
-      keepPreviousData: true,
+      placeholderData: keepPreviousData,
       refetchOnWindowFocus: false,
     }
   );
diff --git a/packages/features/ee/users/server/trpc-router.ts b/packages/features/ee/users/server/trpc-router.ts
index d0789d81da..ff1a9edd40 100644
--- a/packages/features/ee/users/server/trpc-router.ts
+++ b/packages/features/ee/users/server/trpc-router.ts
@@ -57,9 +57,9 @@ function exclude<UserType, Key extends keyof UserType>(user: UserType, keys: Key
 /** Reusable logic that checks for admin permissions and if the requested user exists */
 //const authedAdminWithUserMiddleware = middleware();
 
-const authedAdminProcedureWithRequestedUser = authedAdminProcedure.use(async ({ ctx, next, rawInput }) => {
+const authedAdminProcedureWithRequestedUser = authedAdminProcedure.use(async ({ ctx, next, getRawInput }) => {
   const { prisma } = ctx;
-  const parsed = userIdSchema.safeParse(rawInput);
+  const parsed = userIdSchema.safeParse(await getRawInput());
   if (!parsed.success) throw new TRPCError({ code: "BAD_REQUEST", message: "User id is required" });
   const { userId: id } = parsed.data;
   const user = await prisma.user.findUnique({ where: { id } });
diff --git a/packages/features/ee/video/ViewRecordingsDialog.tsx b/packages/features/ee/video/ViewRecordingsDialog.tsx
index 6134304d25..d286a8860b 100644
--- a/packages/features/ee/video/ViewRecordingsDialog.tsx
+++ b/packages/features/ee/video/ViewRecordingsDialog.tsx
@@ -1,5 +1,5 @@
 import { useRouter } from "next/navigation";
-import { useState, Suspense } from "react";
+import { useState, Suspense, useEffect } from "react";
 
 import dayjs from "@calcom/dayjs";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
@@ -64,18 +64,21 @@ const useRecordingDownload = () => {
     },
     {
       enabled: !!recordingId,
-      cacheTime: 0,
+      gcTime: 0,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
       retry: false,
-      onSuccess: (data) => {
-        if (data && data.download_link) {
-          window.location.href = data.download_link;
-        }
-      },
     }
   );
 
+  useEffect(
+    function refactorMeWithoutEffect() {
+      if (data && data.download_link) {
+        window.location.href = data.download_link;
+      }
+    },
+    [data]
+  );
   return {
     setRecordingId: (newRecordingId: string) => {
       // may be a way to do this by default, but this is easy enough.
@@ -157,7 +160,7 @@ export const ViewRecordingsDialog = (props: IViewRecordingsDialog) => {
   const { t, i18n } = useLocale();
   const { isOpenDialog, setIsOpenDialog, booking, timeFormat } = props;
 
-  const { hasTeamPlan, isLoading: isTeamPlanStatusLoading } = useHasTeamPlan();
+  const { hasTeamPlan, isPending: isTeamPlanStatusLoading } = useHasTeamPlan();
 
   const roomName =
     booking?.references?.find((reference: PartialReference) => reference.type === "daily_video")?.meetingId ??
diff --git a/packages/features/ee/workflows/components/DeleteDialog.tsx b/packages/features/ee/workflows/components/DeleteDialog.tsx
index 433dc30c24..4f888ab1f6 100644
--- a/packages/features/ee/workflows/components/DeleteDialog.tsx
+++ b/packages/features/ee/workflows/components/DeleteDialog.tsx
@@ -40,7 +40,7 @@ export const DeleteDialog = (props: IDeleteDialog) => {
   return (
     <Dialog open={isOpenDialog} onOpenChange={setIsOpenDialog}>
       <ConfirmationDialogContent
-        isLoading={deleteMutation.isLoading}
+        isPending={deleteMutation.isPending}
         variety="danger"
         title={t("delete_workflow")}
         confirmBtnText={t("confirm_delete_workflow")}
diff --git a/packages/features/ee/workflows/components/EmptyScreen.tsx b/packages/features/ee/workflows/components/EmptyScreen.tsx
index 7c68104a48..0f9f8fbd34 100644
--- a/packages/features/ee/workflows/components/EmptyScreen.tsx
+++ b/packages/features/ee/workflows/components/EmptyScreen.tsx
@@ -82,7 +82,7 @@ export default function EmptyScreen(props: { isFilteredView: boolean }) {
               subtitle={t("new_workflow_subtitle").toUpperCase()}
               createFunction={(teamId?: number) => createMutation.mutate({ teamId })}
               buttonText={t("create_workflow")}
-              isLoading={createMutation.isLoading}
+              isPending={createMutation.isPending}
             />
           </div>
         </div>
diff --git a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
index 3409fb9137..a50f3e60a3 100644
--- a/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
+++ b/packages/features/ee/workflows/components/EventWorkflowsTab.tsx
@@ -205,7 +205,7 @@ function EventWorkflowsTab(props: Props) {
     t("locked_fields_admin_description"),
     t("locked_fields_member_description")
   );
-  const { data, isLoading } = trpc.viewer.workflows.list.useQuery({
+  const { data, isPending } = trpc.viewer.workflows.list.useQuery({
     teamId: eventType.team?.id,
     userId: !isChildrenManagedEventType ? eventType.userId || undefined : undefined,
   });
@@ -231,7 +231,7 @@ function EventWorkflowsTab(props: Props) {
       );
       setSortedWorkflows(activeWorkflows.concat(disabledWorkflows));
     }
-  }, [isLoading]);
+  }, [isPending]);
 
   const createMutation = trpc.viewer.workflows.create.useMutation({
     onSuccess: async ({ workflow }) => {
@@ -252,7 +252,7 @@ function EventWorkflowsTab(props: Props) {
 
   return (
     <LicenseRequired>
-      {!isLoading ? (
+      {!isPending ? (
         <>
           {isManagedEventType && (
             <Alert
@@ -288,7 +288,7 @@ function EventWorkflowsTab(props: Props) {
                     target="_blank"
                     color="secondary"
                     onClick={() => createMutation.mutate({ teamId: eventType.team?.id })}
-                    loading={createMutation.isLoading}>
+                    loading={createMutation.isPending}>
                     {t("create_workflow")}
                   </Button>
                 }
diff --git a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
index b57d254247..30730de65e 100644
--- a/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
+++ b/packages/features/ee/workflows/components/WorkflowDetailsPage.tsx
@@ -43,7 +43,7 @@ export default function WorkflowDetailsPage(props: Props) {
   const [reload, setReload] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
 
-  const { data, isLoading } = trpc.viewer.eventTypes.getByViewer.useQuery();
+  const { data, isPending } = trpc.viewer.eventTypes.getByViewer.useQuery();
 
   const eventTypeOptions = useMemo(
     () =>
@@ -138,7 +138,7 @@ export default function WorkflowDetailsPage(props: Props) {
                 <MultiSelectCheckboxes
                   options={allEventTypeOptions}
                   isDisabled={props.readOnly}
-                  isLoading={isLoading}
+                  isLoading={isPending}
                   className="w-full md:w-64"
                   setSelected={setSelectedEventTypes}
                   selected={selectedEventTypes}
diff --git a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
index e946a883a8..707c16def1 100644
--- a/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+++ b/packages/features/ee/workflows/components/WorkflowStepContainer.tsx
@@ -614,7 +614,7 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
                           <Button
                             color="secondary"
                             className="-ml-[3px] h-[36px] min-w-fit py-0 sm:block sm:rounded-bl-none sm:rounded-tl-none "
-                            disabled={verifyPhoneNumberMutation.isLoading || props.readOnly}
+                            disabled={verifyPhoneNumberMutation.isPending || props.readOnly}
                             onClick={() => {
                               verifyPhoneNumberMutation.mutate({
                                 phoneNumber: form.getValues(`steps.${step.stepNumber - 1}.sendTo`) || "",
diff --git a/packages/features/ee/workflows/pages/index.tsx b/packages/features/ee/workflows/pages/index.tsx
index e25fbd1135..efc8ad5f57 100644
--- a/packages/features/ee/workflows/pages/index.tsx
+++ b/packages/features/ee/workflows/pages/index.tsx
@@ -64,7 +64,7 @@ function WorkflowsPage() {
             createFunction={(teamId?: number) => {
               createMutation.mutate({ teamId });
             }}
-            isLoading={createMutation.isLoading}
+            isPending={createMutation.isPending}
             disableMobileButton={true}
             onlyShowWithNoTeams={true}
           />
@@ -79,7 +79,7 @@ function WorkflowsPage() {
                 <CreateButtonWithTeamsList
                   subtitle={t("new_workflow_subtitle").toUpperCase()}
                   createFunction={(teamId?: number) => createMutation.mutate({ teamId })}
-                  isLoading={createMutation.isLoading}
+                  isPending={createMutation.isPending}
                   disableMobileButton={true}
                   onlyShowWithTeams={true}
                 />
diff --git a/packages/features/ee/workflows/pages/workflow.tsx b/packages/features/ee/workflows/pages/workflow.tsx
index 15774f4d65..a1a4aae7fc 100644
--- a/packages/features/ee/workflows/pages/workflow.tsx
+++ b/packages/features/ee/workflows/pages/workflow.tsx
@@ -109,7 +109,7 @@ function WorkflowPage() {
     data: workflow,
     isError,
     error,
-    isLoading,
+    isPending,
   } = trpc.viewer.workflows.get.useQuery(
     { id: +workflowId },
     {
@@ -129,7 +129,7 @@ function WorkflowPage() {
     MembershipRole.MEMBER;
 
   useEffect(() => {
-    if (workflow && !isLoading) {
+    if (workflow && !isPending) {
       if (workflow.userId && workflow.activeOn.find((active) => !!active.eventType.teamId)) {
         setIsMixedEventType(true);
       }
@@ -179,7 +179,7 @@ function WorkflowPage() {
       form.setValue("activeOn", activeOn || []);
       setIsAllDataLoaded(true);
     }
-  }, [isLoading]);
+  }, [isPending]);
 
   const updateMutation = trpc.viewer.workflows.update.useMutation({
     onSuccess: async ({ workflow }) => {
@@ -269,7 +269,7 @@ function WorkflowPage() {
         CTA={
           !readOnly && (
             <div>
-              <Button data-testid="save-workflow" type="submit" loading={updateMutation.isLoading}>
+              <Button data-testid="save-workflow" type="submit" loading={updateMutation.isPending}>
                 {t("save")}
               </Button>
             </div>
diff --git a/packages/features/embed/Embed.tsx b/packages/features/embed/Embed.tsx
index 1b4174f1eb..026ffdd283 100644
--- a/packages/features/embed/Embed.tsx
+++ b/packages/features/embed/Embed.tsx
@@ -221,7 +221,7 @@ const EmailEmbed = ({ eventType, username }: { eventType?: EventType; username:
           <CollapsibleContent>
             <div className="text-default text-sm">{t("select_date")}</div>
             <DatePicker
-              isLoading={schedule.isLoading}
+              isPending={schedule.isPending}
               onChange={(date: Dayjs | null) => {
                 setSelectedDate(date === null ? date : date.format("YYYY-MM-DD"));
               }}
diff --git a/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx b/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
index 519fb5f368..d55b5f34b7 100644
--- a/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
+++ b/packages/features/eventtypes/components/BulkEditDefaultConferencingModal.tsx
@@ -81,7 +81,7 @@ export function BulkEditDefaultConferencingModal(props: { open: boolean; setOpen
                 utils.viewer.getUsersDefaultConferencingApp.invalidate();
               }}
             />
-            <Button type="submit" color="primary" loading={updateLocationsMutation.isLoading}>
+            <Button type="submit" color="primary" loading={updateLocationsMutation.isPending}>
               {t("update")}
             </Button>
           </DialogFooter>
diff --git a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
index becaf6bcef..690ea196cc 100644
--- a/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
+++ b/packages/features/eventtypes/components/CreateEventTypeDialog.tsx
@@ -305,7 +305,7 @@ export default function CreateEventTypeDialog({
           </div>
           <DialogFooter showDivider>
             <DialogClose />
-            <Button type="submit" loading={createMutation.isLoading}>
+            <Button type="submit" loading={createMutation.isPending}>
               {t("continue")}
             </Button>
           </DialogFooter>
diff --git a/packages/features/eventtypes/components/DuplicateDialog.tsx b/packages/features/eventtypes/components/DuplicateDialog.tsx
index 0095b8b340..84aa3d2f2f 100644
--- a/packages/features/eventtypes/components/DuplicateDialog.tsx
+++ b/packages/features/eventtypes/components/DuplicateDialog.tsx
@@ -161,7 +161,7 @@ const DuplicateDialog = () => {
           </div>
           <DialogFooter showDivider className="mt-10">
             <DialogClose />
-            <Button type="submit" loading={duplicateMutation.isLoading}>
+            <Button type="submit" loading={duplicateMutation.isPending}>
               {t("continue")}
             </Button>
           </DialogFooter>
diff --git a/packages/features/filters/components/FilterResults.tsx b/packages/features/filters/components/FilterResults.tsx
index 283b7a488f..7fc9adfa8c 100644
--- a/packages/features/filters/components/FilterResults.tsx
+++ b/packages/features/filters/components/FilterResults.tsx
@@ -10,13 +10,13 @@ export function FilterResults({
   emptyScreen,
   children,
 }: {
-  queryRes: { isLoading: boolean; data: { totalCount: number; filtered: unknown[] } | undefined };
+  queryRes: { isPending: boolean; data: { totalCount: number; filtered: unknown[] } | undefined };
   SkeletonLoader: React.FC;
   noResultsScreen: React.ReactNode;
   emptyScreen: React.ReactNode;
   children: React.ReactNode;
 }) {
-  if (queryRes.isLoading) return <SkeletonLoader />;
+  if (queryRes.isPending) return <SkeletonLoader />;
   if (!queryRes.data?.totalCount) return <>{emptyScreen}</>;
 
   return queryRes.data?.totalCount ? (
diff --git a/packages/features/flags/context/provider.ts b/packages/features/flags/context/provider.ts
index deb6adb5b5..21c1833a70 100644
--- a/packages/features/flags/context/provider.ts
+++ b/packages/features/flags/context/provider.ts
@@ -7,7 +7,7 @@ import type { AppFlags } from "../config";
  *
  * Entries consist of the feature flag name as the key and the resolved variant's value as the value.
  */
-export type Flags = AppFlags;
+export type Flags = Partial<AppFlags>;
 
 /**
  * Allows you to access the flags from context
diff --git a/packages/features/flags/hooks/index.ts b/packages/features/flags/hooks/index.ts
index 4b8ca934fb..851cb3b2d9 100644
--- a/packages/features/flags/hooks/index.ts
+++ b/packages/features/flags/hooks/index.ts
@@ -1,12 +1,12 @@
 import type { AppFlags } from "@calcom/features/flags/config";
 import { trpc } from "@calcom/trpc/react";
 
-export function useFlags() {
+const initialData: Partial<AppFlags> = process.env.NEXT_PUBLIC_IS_E2E
+  ? { "managed-event-types": true, organizations: true, teams: true }
+  : {};
+export function useFlags(): Partial<AppFlags> {
   const query = trpc.viewer.features.map.useQuery(undefined, {
-    initialData: process.env.NEXT_PUBLIC_IS_E2E
-      ? { "managed-event-types": true, organizations: true, teams: true }
-      : undefined,
-    placeholderData: {},
+    initialData,
   });
-  return query.data ?? ({} as AppFlags);
+  return query.data ?? {};
 }
diff --git a/packages/features/flags/server/utils.ts b/packages/features/flags/server/utils.ts
index 8f9e8fe755..ddbf1dc491 100644
--- a/packages/features/flags/server/utils.ts
+++ b/packages/features/flags/server/utils.ts
@@ -7,8 +7,8 @@ export async function getFeatureFlagMap(prisma: PrismaClient) {
     orderBy: { slug: "asc" },
     cacheStrategy: { swr: 300, ttl: 300 },
   });
-  return flags.reduce<AppFlags>((acc, flag) => {
+  return flags.reduce((acc, flag) => {
     acc[flag.slug as keyof AppFlags] = flag.enabled;
     return acc;
-  }, {} as AppFlags);
+  }, {} as Partial<AppFlags>);
 }
diff --git a/packages/features/insights/components/AverageEventDurationChart.tsx b/packages/features/insights/components/AverageEventDurationChart.tsx
index db1e47b081..aca9a5136d 100644
--- a/packages/features/insights/components/AverageEventDurationChart.tsx
+++ b/packages/features/insights/components/AverageEventDurationChart.tsx
@@ -16,7 +16,7 @@ export const AverageEventDurationChart = () => {
   const [startDate, endDate] = dateRange;
   const { selectedTeamId: teamId, selectedUserId } = filter;
   const initialConfigIsReady = !!(initialConfig?.teamId || initialConfig?.userId || initialConfig?.isAll);
-  const { data, isSuccess, isLoading } = trpc.viewer.insights.averageEventDuration.useQuery(
+  const { data, isSuccess, isPending } = trpc.viewer.insights.averageEventDuration.useQuery(
     {
       startDate: startDate.toISOString(),
       endDate: endDate.toISOString(),
@@ -35,7 +35,7 @@ export const AverageEventDurationChart = () => {
     }
   );
 
-  if (isLoading) return <LoadingInsight />;
+  if (isPending) return <LoadingInsight />;
 
   if (!isSuccess || !startDate || !endDate || (!teamId && !selectedUserId)) return null;
   const isNoData = (data && data.length === 0) || data.every((item) => item["Average"] === 0);
diff --git a/packages/features/insights/components/BookingKPICards.tsx b/packages/features/insights/components/BookingKPICards.tsx
index 71e125cecc..85b3609529 100644
--- a/packages/features/insights/components/BookingKPICards.tsx
+++ b/packages/features/insights/components/BookingKPICards.tsx
@@ -18,7 +18,7 @@ export const BookingKPICards = () => {
 
   const { selectedTeamId: teamId } = filter;
 
-  const { data, isSuccess, isLoading } = trpc.viewer.insights.eventsByStatus.useQuery(
+  const { data, isSuccess, isPending } = trpc.viewer.insights.eventsByStatus.useQuery(
     {
       startDate: startDate.toISOString(),
       endDate: endDate.toISOString(),
@@ -59,7 +59,7 @@ export const BookingKPICards = () => {
     },
   ];
 
-  if (isLoading) {
+  if (isPending) {
     return <LoadingKPICards categories={categories} />;
   }
 
diff --git a/packages/features/insights/components/BookingStatusLineChart.tsx b/packages/features/insights/components/BookingStatusLineChart.tsx
index a322ba47ca..6fa9285aff 100644
--- a/packages/features/insights/components/BookingStatusLineChart.tsx
+++ b/packages/features/insights/components/BookingStatusLineChart.tsx
@@ -29,7 +29,7 @@ export const BookingStatusLineChart = () => {
   const {
     data: eventsTimeLine,
     isSuccess,
-    isLoading,
+    isPending,
   } = trpc.viewer.insights.eventsTimeline.useQuery(
     {
       timeView: selectedTimeView,
@@ -49,7 +49,7 @@ export const BookingStatusLineChart = () => {
     }
   );
 
-  if (isLoading) return <LoadingInsight />;
+  if (isPending) return <LoadingInsight />;
 
   if (!isSuccess) return null;
 
diff --git a/packages/features/insights/components/LeastBookedTeamMembersTable.tsx b/packages/features/insights/components/LeastBookedTeamMembersTable.tsx
index a43e6bc07c..92b9b76f9b 100644
--- a/packages/features/insights/components/LeastBookedTeamMembersTable.tsx
+++ b/packages/features/insights/components/LeastBookedTeamMembersTable.tsx
@@ -14,7 +14,7 @@ export const LeastBookedTeamMembersTable = () => {
   const { dateRange, selectedEventTypeId, selectedTeamId: teamId, isAll, initialConfig } = filter;
   const [startDate, endDate] = dateRange;
 
-  const { data, isSuccess, isLoading } = trpc.viewer.insights.membersWithLeastBookings.useQuery(
+  const { data, isSuccess, isPending } = trpc.viewer.insights.membersWithLeastBookings.useQuery(
     {
       startDate: startDate.toISOString(),
       endDate: endDate.toISOString(),
@@ -31,7 +31,7 @@ export const LeastBookedTeamMembersTable = () => {
     }
   );
 
-  if (isLoading) return <LoadingInsight />;
+  if (isPending) return <LoadingInsight />;
 
   if (!isSuccess || !startDate || !endDate || !teamId) return null;
 
diff --git a/packages/features/insights/components/MostBookedTeamMembersTable.tsx b/packages/features/insights/components/MostBookedTeamMembersTable.tsx
index 5c006dabe1..a9e37db58b 100644
--- a/packages/features/insights/components/MostBookedTeamMembersTable.tsx
+++ b/packages/features/insights/components/MostBookedTeamMembersTable.tsx
@@ -15,7 +15,7 @@ export const MostBookedTeamMembersTable = () => {
   const [startDate, endDate] = dateRange;
   const { selectedTeamId: teamId } = filter;
 
-  const { data, isSuccess, isLoading } = trpc.viewer.insights.membersWithMostBookings.useQuery(
+  const { data, isSuccess, isPending } = trpc.viewer.insights.membersWithMostBookings.useQuery(
     {
       startDate: startDate.toISOString(),
       endDate: endDate.toISOString(),
@@ -32,7 +32,7 @@ export const MostBookedTeamMembersTable = () => {
     }
   );
 
-  if (isLoading) return <LoadingInsight />;
+  if (isPending) return <LoadingInsight />;
 
   if (!isSuccess || !startDate || !endDate || !teamId) return null;
 
diff --git a/packages/features/insights/components/PopularEventsTable.tsx b/packages/features/insights/components/PopularEventsTable.tsx
index 4347ca6799..2ec8b3cde1 100644
--- a/packages/features/insights/components/PopularEventsTable.tsx
+++ b/packages/features/insights/components/PopularEventsTable.tsx
@@ -14,7 +14,7 @@ export const PopularEventsTable = () => {
   const [startDate, endDate] = dateRange;
   const { selectedTeamId: teamId } = filter;
 
-  const { data, isSuccess, isLoading } = trpc.viewer.insights.popularEventTypes.useQuery(
+  const { data, isSuccess, isPending } = trpc.viewer.insights.popularEventTypes.useQuery(
     {
       startDate: startDate.toISOString(),
       endDate: endDate.toISOString(),
@@ -32,7 +32,7 @@ export const PopularEventsTable = () => {
     }
   );
 
-  if (isLoading) return <LoadingInsight />;
+  if (isPending) return <LoadingInsight />;
 
   if (!isSuccess || !startDate || !endDate || (!teamId && !selectedUserId)) return null;
 
diff --git a/packages/features/insights/filters/Download/index.tsx b/packages/features/insights/filters/Download/index.tsx
index 73d49bfaa4..e9250fe9d5 100644
--- a/packages/features/insights/filters/Download/index.tsx
+++ b/packages/features/insights/filters/Download/index.tsx
@@ -11,7 +11,7 @@ const Download = () => {
 
   const { t } = useLocale();
 
-  const { data, isLoading } = trpc.viewer.insights.rawData.useQuery(
+  const { data, isPending } = trpc.viewer.insights.rawData.useQuery(
     {
       startDate: filter.dateRange[0].toISOString(),
       endDate: filter.dateRange[1].toISOString(),
@@ -60,7 +60,7 @@ const Download = () => {
         <Button
           EndIcon={FileDownIcon}
           color="secondary"
-          {...(isLoading && { loading: isLoading })}
+          {...(isPending && { loading: isPending })}
           className="self-end sm:self-baseline">
           {t("download")}
         </Button>
diff --git a/packages/features/insights/server/trpc-router.ts b/packages/features/insights/server/trpc-router.ts
index 30f461e2d2..5158e9fdcc 100644
--- a/packages/features/insights/server/trpc-router.ts
+++ b/packages/features/insights/server/trpc-router.ts
@@ -17,8 +17,8 @@ const UserBelongsToTeamInput = z.object({
   isAll: z.boolean().optional(),
 });
 
-const userBelongsToTeamProcedure = authedProcedure.use(async ({ ctx, next, rawInput }) => {
-  const parse = UserBelongsToTeamInput.safeParse(rawInput);
+const userBelongsToTeamProcedure = authedProcedure.use(async ({ ctx, next, getRawInput }) => {
+  const parse = UserBelongsToTeamInput.safeParse(await getRawInput());
   if (!parse.success) {
     throw new TRPCError({ code: "BAD_REQUEST" });
   }
@@ -39,6 +39,7 @@ const userBelongsToTeamProcedure = authedProcedure.use(async ({ ctx, next, rawIn
     where: membershipWhereConditional,
   });
 
+  let isOwnerAdminOfParentTeam = false;
   // Probably we couldn't find a membership because the user is not a direct member of the team
   // So that would mean ctx.user.organization is present
   if ((parse.data.isAll && ctx.user.organizationId) || (!membership && ctx.user.organizationId)) {
@@ -56,19 +57,17 @@ const userBelongsToTeamProcedure = authedProcedure.use(async ({ ctx, next, rawIn
     if (!membershipOrg) {
       throw new TRPCError({ code: "UNAUTHORIZED" });
     }
-
-    return next({
-      ctx: {
-        ...ctx,
-        user: {
-          ...ctx.user,
-          isOwnerAdminOfParentTeam: true,
-        },
-      },
-    });
+    isOwnerAdminOfParentTeam = true;
   }
 
-  return next();
+  return next({
+    ctx: {
+      user: {
+        ...ctx.user,
+        isOwnerAdminOfParentTeam,
+      },
+    },
+  });
 });
 
 const UserSelect = {
diff --git a/packages/features/schedules/components/NewScheduleButton.tsx b/packages/features/schedules/components/NewScheduleButton.tsx
index 4ae4d07ace..77aa0d4955 100644
--- a/packages/features/schedules/components/NewScheduleButton.tsx
+++ b/packages/features/schedules/components/NewScheduleButton.tsx
@@ -85,7 +85,7 @@ export function NewScheduleButton({
           />
           <DialogFooter>
             <DialogClose />
-            <Button type="submit" loading={createMutation.isLoading}>
+            <Button type="submit" loading={createMutation.isPending}>
               {t("continue")}
             </Button>
           </DialogFooter>
diff --git a/packages/features/schedules/components/ScheduleListItem.tsx b/packages/features/schedules/components/ScheduleListItem.tsx
index 2af0c12d44..f3ddb528b9 100644
--- a/packages/features/schedules/components/ScheduleListItem.tsx
+++ b/packages/features/schedules/components/ScheduleListItem.tsx
@@ -37,7 +37,7 @@ export function ScheduleListItem({
 }) {
   const { t, i18n } = useLocale();
 
-  const { data, isLoading } = trpc.viewer.availability.schedule.get.useQuery({ scheduleId: schedule.id });
+  const { data, isPending } = trpc.viewer.availability.schedule.get.useQuery({ scheduleId: schedule.id });
 
   return (
     <li key={schedule.id}>
@@ -87,7 +87,7 @@ export function ScheduleListItem({
               StartIcon={MoreHorizontal}
             />
           </DropdownMenuTrigger>
-          {!isLoading && data && (
+          {!isPending && data && (
             <DropdownMenuContent>
               <DropdownMenuItem className="min-w-40 focus:ring-muted">
                 {!schedule.isDefault && (
diff --git a/packages/features/settings/BookerLayoutSelector.tsx b/packages/features/settings/BookerLayoutSelector.tsx
index e097298db0..487126d931 100644
--- a/packages/features/settings/BookerLayoutSelector.tsx
+++ b/packages/features/settings/BookerLayoutSelector.tsx
@@ -109,7 +109,7 @@ const BookerLayoutFields = ({
   isOuterBorder,
 }: BookerLayoutFieldsProps) => {
   const { t } = useLocale();
-  const { isLoading: isUserLoading, data: user } = useMeQuery();
+  const { isPending: isUserLoading, data: user } = useMeQuery();
   const [isOverridingSettings, setIsOverridingSettings] = useState(false);
 
   const disableFields = showUserSettings && !isOverridingSettings;
diff --git a/packages/features/settings/TimezoneChangeDialog.tsx b/packages/features/settings/TimezoneChangeDialog.tsx
index 9b7038a664..54b412dbf4 100644
--- a/packages/features/settings/TimezoneChangeDialog.tsx
+++ b/packages/features/settings/TimezoneChangeDialog.tsx
@@ -9,7 +9,7 @@ import { Dialog, DialogClose, DialogContent, DialogFooter, showToast } from "@ca
 
 export default function TimezoneChangeDialog() {
   const { t } = useLocale();
-  const { data: user, isLoading } = trpc.viewer.me.useQuery();
+  const { data: user, isPending } = trpc.viewer.me.useQuery();
   const utils = trpc.useContext();
   const userTz = user?.timeZone;
   const currentTz = dayjs.tz.guess() || "Europe/London";
@@ -42,10 +42,10 @@ export default function TimezoneChangeDialog() {
   const [open, setOpen] = useState(false);
   useEffect(() => {
     const tzDifferent =
-      !isLoading && dayjs.tz(undefined, currentTz).utcOffset() !== dayjs.tz(undefined, userTz).utcOffset();
+      !isPending && dayjs.tz(undefined, currentTz).utcOffset() !== dayjs.tz(undefined, userTz).utcOffset();
     const showDialog = tzDifferent && !document.cookie.includes("calcom-timezone-dialog=1");
     setOpen(!IS_VISUAL_REGRESSION_TESTING && showDialog);
-  }, [currentTz, isLoading, userTz]);
+  }, [currentTz, isPending, userTz]);
 
   // save cookie to not show again
   function onCancel(maxAge: number, toast: boolean) {
diff --git a/packages/features/shell/Shell.tsx b/packages/features/shell/Shell.tsx
index 3ba40df61c..4511ef8418 100644
--- a/packages/features/shell/Shell.tsx
+++ b/packages/features/shell/Shell.tsx
@@ -200,10 +200,10 @@ function useRedirectToOnboardingIfNeeded() {
 type allBannerProps = { [Key in BannerType]: BannerTypeProps[Key]["data"] };
 
 const useBanners = () => {
-  const { data: getUserTopBanners, isLoading } = trpc.viewer.getUserTopBanners.useQuery();
+  const { data: getUserTopBanners, isPending } = trpc.viewer.getUserTopBanners.useQuery();
   const { data: userSession } = useSession();
 
-  if (isLoading || !userSession) return null;
+  if (isPending || !userSession) return null;
 
   const isUserInactiveAdmin = userSession?.user.role === "INACTIVE_ADMIN";
   const userImpersonatedByUID = userSession?.user.impersonatedBy?.id;
diff --git a/packages/features/shell/TeamInviteBadge.tsx b/packages/features/shell/TeamInviteBadge.tsx
index 6f315e9957..10eee960b2 100644
--- a/packages/features/shell/TeamInviteBadge.tsx
+++ b/packages/features/shell/TeamInviteBadge.tsx
@@ -3,10 +3,10 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Badge } from "@calcom/ui";
 
 export function TeamInviteBadge() {
-  const { isLoading, listInvites } = useTeamInvites();
+  const { isPending, listInvites } = useTeamInvites();
   const { t } = useLocale();
 
-  if (isLoading || !listInvites || listInvites.length === 0) return null;
+  if (isPending || !listInvites || listInvites.length === 0) return null;
 
   return <Badge variant="default">{t("invite_team_notifcation_badge")}</Badge>;
 }
diff --git a/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx b/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
index 7e7464bcad..41fdee75db 100644
--- a/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
+++ b/packages/features/timezone-buddy/components/AvailabilityEditSheet.tsx
@@ -75,12 +75,12 @@ export function AvailabilityEditSheet(props: Props) {
   const { t } = useLocale();
   const utils = trpc.useContext();
 
-  const { data: hasEditPermission, isLoading: loadingPermissions } =
+  const { data: hasEditPermission, isPending: loadingPermissions } =
     trpc.viewer.teams.hasEditPermissionForUser.useQuery({
       memberId: userId,
     });
 
-  const { data, isLoading } = trpc.viewer.availability.schedule.getScheduleByUserId.useQuery({
+  const { data, isPending } = trpc.viewer.availability.schedule.getScheduleByUserId.useQuery({
     userId: userId,
   });
 
@@ -133,7 +133,7 @@ export function AvailabilityEditSheet(props: Props) {
                 disabled={!hasEditPermission || !data?.hasDefaultSchedule}
                 className="w-full justify-center"
                 type="submit"
-                loading={updateMutation.isLoading}
+                loading={updateMutation.isPending}
                 form="availability-form">
                 {t("save")}
               </Button>
@@ -146,7 +146,7 @@ export function AvailabilityEditSheet(props: Props) {
               })}
             </SheetTitle>
           </SheetHeader>
-          {!data?.hasDefaultSchedule && !isLoading && hasEditPermission && (
+          {!data?.hasDefaultSchedule && !isPending && hasEditPermission && (
             <div className="my-2">
               <Alert severity="warning" title={t("view_only_edit_availability_not_onboarded")} />
             </div>
diff --git a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
index 800df9acbb..e1865f02be 100644
--- a/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
+++ b/packages/features/timezone-buddy/components/AvailabilitySliderTable.tsx
@@ -1,3 +1,4 @@
+import { keepPreviousData } from "@tanstack/react-query";
 import type { ColumnDef } from "@tanstack/react-table";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { useMemo, useRef, useCallback, useEffect, useState } from "react";
@@ -62,7 +63,7 @@ export function AvailabilitySliderTable() {
   const [editSheetOpen, setEditSheetOpen] = useState(false);
   const [selectedUser, setSelectedUser] = useState<SliderUser | null>(null);
 
-  const { data, isLoading, fetchNextPage, isFetching } = trpc.viewer.availability.listTeam.useInfiniteQuery(
+  const { data, isPending, fetchNextPage, isFetching } = trpc.viewer.availability.listTeam.useInfiniteQuery(
     {
       limit: 10,
       loggedInUsersTz: dayjs.tz.guess() || "Europe/London",
@@ -71,7 +72,7 @@ export function AvailabilitySliderTable() {
     },
     {
       getNextPageParam: (lastPage) => lastPage.nextCursor,
-      keepPreviousData: true,
+      placeholderData: keepPreviousData,
     }
   );
 
@@ -203,7 +204,7 @@ export function AvailabilitySliderTable() {
               setSelectedUser(row.original);
             }}
             data={flatData}
-            isLoading={isLoading}
+            isPending={isPending}
             // tableOverlay={<HoverOverview />}
             onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)}
           />
diff --git a/packages/features/tips/UpgradeTip.tsx b/packages/features/tips/UpgradeTip.tsx
index d8c4a177d0..6c7cf3c89c 100644
--- a/packages/features/tips/UpgradeTip.tsx
+++ b/packages/features/tips/UpgradeTip.tsx
@@ -29,11 +29,11 @@ export function UpgradeTip({
   plan: "team" | "enterprise";
 }) {
   const { t } = useLocale();
-  const { isLoading, hasTeamPlan } = useHasTeamPlan();
+  const { isPending, hasTeamPlan } = useHasTeamPlan();
   const { data } = trpc.viewer.teams.getUpgradeable.useQuery();
 
   const hasEnterprisePlan = false;
-  //const { isLoading , hasEnterprisePlan } = useHasEnterprisePlan();
+  //const { isPending , hasEnterprisePlan } = useHasEnterprisePlan();
 
   const hasUnpublishedTeam = !!data?.[0];
 
@@ -41,7 +41,7 @@ export function UpgradeTip({
 
   if (plan === "enterprise" && hasEnterprisePlan) return children;
 
-  if (isLoading) return <>{isParentLoading}</>;
+  if (isPending) return <>{isParentLoading}</>;
 
   return (
     <>
diff --git a/packages/features/troubleshooter/components/CalendarToggleContainer.tsx b/packages/features/troubleshooter/components/CalendarToggleContainer.tsx
index ea24a81f33..ad706a8ce2 100644
--- a/packages/features/troubleshooter/components/CalendarToggleContainer.tsx
+++ b/packages/features/troubleshooter/components/CalendarToggleContainer.tsx
@@ -79,14 +79,14 @@ function EmptyCalendarToggleItem() {
 
 export function CalendarToggleContainer() {
   const { t } = useLocale();
-  const { data, isLoading } = trpc.viewer.connectedCalendars.useQuery();
+  const { data, isPending } = trpc.viewer.connectedCalendars.useQuery();
 
   const hasConnectedCalendars = data && data?.connectedCalendars.length > 0;
 
   return (
     <div className="flex flex-col space-y-3">
       <p className="text-sm font-medium leading-none">{t("calendars_were_checking_for_conflicts")}</p>
-      {hasConnectedCalendars && !isLoading ? (
+      {hasConnectedCalendars && !isPending ? (
         <>
           {data.connectedCalendars.map((calendar) => {
             const foundPrimary = calendar.calendars?.find((item) => item.primary);
diff --git a/packages/features/troubleshooter/components/EventTypeSelect.tsx b/packages/features/troubleshooter/components/EventTypeSelect.tsx
index 9bfda0d6ad..0ebf8f719a 100644
--- a/packages/features/troubleshooter/components/EventTypeSelect.tsx
+++ b/packages/features/troubleshooter/components/EventTypeSelect.tsx
@@ -7,7 +7,7 @@ import { getQueryParam } from "../../bookings/Booker/utils/query-param";
 import { useTroubleshooterStore } from "../store";
 
 export function EventTypeSelect() {
-  const { data: eventTypes, isLoading } = trpc.viewer.eventTypes.list.useQuery();
+  const { data: eventTypes, isPending } = trpc.viewer.eventTypes.list.useQuery();
   const selectedEventType = useTroubleshooterStore((state) => state.event);
   const setSelectedEventType = useTroubleshooterStore((state) => state.setEvent);
 
@@ -59,7 +59,7 @@ export function EventTypeSelect() {
     <SelectField
       label="Event Type"
       options={options}
-      isDisabled={isLoading || options.length === 0}
+      isDisabled={isPending || options.length === 0}
       value={options.find((option) => option.value === selectedEventType?.slug) || options[0]}
       onChange={(option) => {
         if (!option) return;
diff --git a/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx b/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx
index 3215264b71..d6a394a86b 100644
--- a/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx
+++ b/packages/features/users/components/UserTable/BulkActions/DeleteBulkUsers.tsx
@@ -33,7 +33,7 @@ export function DeleteBulkUsers({ users, onRemove }: Props) {
         variety="danger"
         title={t("remove_users_from_org")}
         confirmBtnText={t("remove")}
-        isLoading={deleteMutation.isLoading}
+        isPending={deleteMutation.isPending}
         onConfirm={() => {
           deleteMutation.mutateAsync({
             userIds: selectedRows.map((user) => user.id),
diff --git a/packages/features/users/components/UserTable/BulkActions/TeamList.tsx b/packages/features/users/components/UserTable/BulkActions/TeamList.tsx
index 82992229c2..b4a8d22277 100644
--- a/packages/features/users/components/UserTable/BulkActions/TeamList.tsx
+++ b/packages/features/users/components/UserTable/BulkActions/TeamList.tsx
@@ -106,7 +106,7 @@ export function TeamListBulkAction({ table }: Props) {
           </Command>
           <div className="my-1.5 flex w-full">
             <Button
-              loading={mutation.isLoading}
+              loading={mutation.isPending}
               className="ml-auto mr-1.5 rounded-md"
               size="sm"
               onClick={async () => {
diff --git a/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx b/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
index 1c14a0c273..ea8ef7f9aa 100644
--- a/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/EditUserSheet.tsx
@@ -18,7 +18,7 @@ export function EditUserSheet({ state, dispatch }: { state: State; dispatch: Dis
   const { user: selectedUser } = state.editSheet;
   const orgBranding = useOrgBranding();
   const [editMode, setEditMode] = useEditMode((state) => [state.editMode, state.setEditMode], shallow);
-  const { data: loadedUser, isLoading } = trpc.viewer.organizations.getUser.useQuery({
+  const { data: loadedUser, isPending } = trpc.viewer.organizations.getUser.useQuery({
     userId: selectedUser?.id,
   });
 
@@ -36,7 +36,7 @@ export function EditUserSheet({ state, dispatch }: { state: State; dispatch: Dis
         dispatch({ type: "CLOSE_MODAL" });
       }}>
       <SheetContent position="right" size="default">
-        {!isLoading && loadedUser ? (
+        {!isPending && loadedUser ? (
           <div className="flex h-full flex-col">
             {!editMode ? (
               <div className="flex-grow">
@@ -48,12 +48,12 @@ export function EditUserSheet({ state, dispatch }: { state: State; dispatch: Dis
                     imageSrc={avatarURL}
                   />
                   <div className="space-between flex flex-col leading-none">
-                    <Skeleton loading={isLoading} as="p" waitForTranslation={false}>
+                    <Skeleton loading={isPending} as="p" waitForTranslation={false}>
                       <span className="text-emphasis text-lg font-semibold">
                         {loadedUser?.name ?? "Nameless User"}
                       </span>
                     </Skeleton>
-                    <Skeleton loading={isLoading} as="p" waitForTranslation={false}>
+                    <Skeleton loading={isPending} as="p" waitForTranslation={false}>
                       <p className="subtle text-sm font-normal">
                         {orgBranding?.fullDomain ?? WEBAPP_URL}/{loadedUser?.username}
                       </p>
diff --git a/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx b/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
index 2f5ffc5aac..668a0ab6c0 100644
--- a/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
+++ b/packages/features/users/components/UserTable/EditSheet/SheetFooterControls.tsx
@@ -7,7 +7,7 @@ import { useEditMode } from "./store";
 function EditModeFooter() {
   const { t } = useLocale();
   const setEditMode = useEditMode((state) => state.setEditMode);
-  const isLoading = useEditMode((state) => state.mutationLoading);
+  const isPending = useEditMode((state) => state.mutationLoading);
 
   return (
     <>
@@ -21,7 +21,7 @@ function EditModeFooter() {
         {t("cancel")}
       </Button>
 
-      <Button type="submit" className="w-full justify-center" form="edit-user-form" loading={isLoading}>
+      <Button type="submit" className="w-full justify-center" form="edit-user-form" loading={isPending}>
         {t("update")}
       </Button>
     </>
diff --git a/packages/features/users/components/UserTable/InviteMemberModal.tsx b/packages/features/users/components/UserTable/InviteMemberModal.tsx
index 0cdb5b12fd..2c777dabaf 100644
--- a/packages/features/users/components/UserTable/InviteMemberModal.tsx
+++ b/packages/features/users/components/UserTable/InviteMemberModal.tsx
@@ -61,7 +61,7 @@ export function InviteMemberModal(props: Props) {
       teamId={orgId}
       isOrg={true}
       justEmailInvites={!!orgId}
-      isLoading={inviteMemberMutation.isLoading}
+      isPending={inviteMemberMutation.isPending}
       onSubmit={(values) => {
         inviteMemberMutation.mutate({
           teamId: orgId,
diff --git a/packages/features/users/components/UserTable/UserListTable.tsx b/packages/features/users/components/UserTable/UserListTable.tsx
index bd9f6dd411..858ffc6a3b 100644
--- a/packages/features/users/components/UserTable/UserListTable.tsx
+++ b/packages/features/users/components/UserTable/UserListTable.tsx
@@ -1,13 +1,14 @@
+import { keepPreviousData } from "@tanstack/react-query";
 import type { ColumnDef } from "@tanstack/react-table";
 import { Plus } from "lucide-react";
 import { useSession } from "next-auth/react";
-import { useMemo, useRef, useCallback, useEffect, useReducer } from "react";
+import { useCallback, useEffect, useMemo, useReducer, useRef } from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { MembershipRole } from "@calcom/prisma/enums";
 import { trpc } from "@calcom/trpc";
-import { Avatar, Badge, Button, DataTable, Checkbox } from "@calcom/ui";
+import { Avatar, Badge, Button, Checkbox, DataTable } from "@calcom/ui";
 
 import { useOrgBranding } from "../../../ee/organizations/context/provider";
 import { DeleteBulkUsers } from "./BulkActions/DeleteBulkUsers";
@@ -114,14 +115,14 @@ export function UserListTable() {
   const { t } = useLocale();
   const orgBranding = useOrgBranding();
 
-  const { data, isLoading, fetchNextPage, isFetching } =
+  const { data, isPending, fetchNextPage, isFetching } =
     trpc.viewer.organizations.listMembers.useInfiniteQuery(
       {
         limit: 10,
       },
       {
         getNextPageParam: (lastPage) => lastPage.nextCursor,
-        keepPreviousData: true,
+        placeholderData: keepPreviousData,
       }
     );
 
@@ -329,7 +330,7 @@ export function UserListTable() {
         }
         columns={memorisedColumns}
         data={flatData}
-        isLoading={isLoading}
+        isPending={isPending}
         onScroll={(e) => fetchMoreOnBottomReached(e.target as HTMLDivElement)}
         filterableItems={[
           {
diff --git a/packages/features/webhooks/components/WebhookTestDisclosure.tsx b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
index 52db5aee4e..11e84c252e 100644
--- a/packages/features/webhooks/components/WebhookTestDisclosure.tsx
+++ b/packages/features/webhooks/components/WebhookTestDisclosure.tsx
@@ -27,7 +27,7 @@ export default function WebhookTestDisclosure() {
         <Button
           type="button"
           color="secondary"
-          disabled={mutation.isLoading || !subscriberUrl}
+          disabled={mutation.isPending || !subscriberUrl}
           StartIcon={Activity}
           onClick={() => {
             try {
diff --git a/packages/features/webhooks/pages/webhook-edit-view.tsx b/packages/features/webhooks/pages/webhook-edit-view.tsx
index 8da185a933..dae3f9edbd 100644
--- a/packages/features/webhooks/pages/webhook-edit-view.tsx
+++ b/packages/features/webhooks/pages/webhook-edit-view.tsx
@@ -25,7 +25,7 @@ function Component({ webhookId }: { webhookId: string }) {
   const { t } = useLocale();
   const utils = trpc.useContext();
   const router = useRouter();
-  const { data: installedApps, isLoading } = trpc.viewer.integrations.useQuery(
+  const { data: installedApps, isPending } = trpc.viewer.integrations.useQuery(
     { variant: "other", onlyInstalled: true },
     {
       suspense: true,
@@ -54,7 +54,7 @@ function Component({ webhookId }: { webhookId: string }) {
     },
   });
 
-  if (isLoading || !webhook) return <SkeletonContainer />;
+  if (isPending || !webhook) return <SkeletonContainer />;
 
   return (
     <>
diff --git a/packages/features/webhooks/pages/webhook-new-view.tsx b/packages/features/webhooks/pages/webhook-new-view.tsx
index e6c35c80a4..aacf041477 100644
--- a/packages/features/webhooks/pages/webhook-new-view.tsx
+++ b/packages/features/webhooks/pages/webhook-new-view.tsx
@@ -32,7 +32,7 @@ const NewWebhookView = () => {
 
   const teamId = searchParams?.get("teamId") ? Number(searchParams.get("teamId")) : undefined;
 
-  const { data: installedApps, isLoading } = trpc.viewer.integrations.useQuery(
+  const { data: installedApps, isPending } = trpc.viewer.integrations.useQuery(
     { variant: "other", onlyInstalled: true },
     {
       suspense: true,
@@ -83,7 +83,7 @@ const NewWebhookView = () => {
     });
   };
 
-  if (isLoading)
+  if (isPending)
     return (
       <SkeletonLoader
         title={t("add_webhook")}
diff --git a/packages/features/webhooks/pages/webhooks-view.tsx b/packages/features/webhooks/pages/webhooks-view.tsx
index 2cd9e1946c..81d144eb0a 100644
--- a/packages/features/webhooks/pages/webhooks-view.tsx
+++ b/packages/features/webhooks/pages/webhooks-view.tsx
@@ -45,11 +45,11 @@ const WebhooksView = () => {
   const router = useRouter();
   const session = useSession();
 
-  const { data, isLoading } = trpc.viewer.webhook.getByViewer.useQuery(undefined, {
+  const { data, isPending } = trpc.viewer.webhook.getByViewer.useQuery(undefined, {
     enabled: session.status === "authenticated",
   });
 
-  if (isLoading || !data) {
+  if (isPending || !data) {
     return (
       <SkeletonLoader
         title={t("webhooks")}
diff --git a/packages/lib/getLocaleFromRequest.ts b/packages/lib/getLocaleFromRequest.ts
index 246c4482f0..168ac60706 100644
--- a/packages/lib/getLocaleFromRequest.ts
+++ b/packages/lib/getLocaleFromRequest.ts
@@ -3,7 +3,8 @@ import parser from "accept-language-parser";
 import type { GetServerSidePropsContext, NextApiRequest } from "next";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import type { Maybe } from "@calcom/trpc/server";
+
+type Maybe<T> = T | null | undefined;
 
 const { i18n } = require("@calcom/config/next-i18next.config");
 
diff --git a/packages/lib/hooks/useHasPaidPlan.ts b/packages/lib/hooks/useHasPaidPlan.ts
index 7ad90ab099..c940939b52 100644
--- a/packages/lib/hooks/useHasPaidPlan.ts
+++ b/packages/lib/hooks/useHasPaidPlan.ts
@@ -4,39 +4,39 @@ import { IS_SELF_HOSTED } from "../constants";
 import hasKeyInMetadata from "../hasKeyInMetadata";
 
 export function useHasPaidPlan() {
-  if (IS_SELF_HOSTED) return { isLoading: false, hasPaidPlan: true };
+  if (IS_SELF_HOSTED) return { isPending: false, hasPaidPlan: true };
 
-  const { data: hasTeamPlan, isLoading: isLoadingTeamQuery } = trpc.viewer.teams.hasTeamPlan.useQuery();
+  const { data: hasTeamPlan, isPending: isPendingTeamQuery } = trpc.viewer.teams.hasTeamPlan.useQuery();
 
-  const { data: user, isLoading: isLoadingUserQuery } = trpc.viewer.me.useQuery();
+  const { data: user, isPending: isPendingUserQuery } = trpc.viewer.me.useQuery();
 
-  const isLoading = isLoadingTeamQuery || isLoadingUserQuery;
+  const isPending = isPendingTeamQuery || isPendingUserQuery;
 
   const isCurrentUsernamePremium =
     user && hasKeyInMetadata(user, "isPremium") ? !!user.metadata.isPremium : false;
 
   const hasPaidPlan = hasTeamPlan?.hasTeamPlan || isCurrentUsernamePremium;
 
-  return { isLoading, hasPaidPlan };
+  return { isPending, hasPaidPlan };
 }
 
 export function useTeamInvites() {
   const listInvites = trpc.viewer.teams.listInvites.useQuery();
 
-  return { isLoading: listInvites.isLoading, listInvites: listInvites.data };
+  return { isPending: listInvites.isPending, listInvites: listInvites.data };
 }
 
 export function useHasTeamPlan() {
-  const { data: hasTeamPlan, isLoading } = trpc.viewer.teams.hasTeamPlan.useQuery();
+  const { data: hasTeamPlan, isPending } = trpc.viewer.teams.hasTeamPlan.useQuery();
 
-  return { isLoading, hasTeamPlan: hasTeamPlan?.hasTeamPlan };
+  return { isPending, hasTeamPlan: hasTeamPlan?.hasTeamPlan };
 }
 
 export function useHasEnterprisePlan() {
   // TODO: figure out how to get "has Enterprise / has Org" from the backend
-  const { data: hasTeamPlan, isLoading } = trpc.viewer.teams.hasTeamPlan.useQuery();
+  const { data: hasTeamPlan, isPending } = trpc.viewer.teams.hasTeamPlan.useQuery();
 
-  return { isLoading, hasTeamPlan: hasTeamPlan?.hasTeamPlan };
+  return { isPending, hasTeamPlan: hasTeamPlan?.hasTeamPlan };
 }
 
 export default useHasPaidPlan;
diff --git a/packages/trpc/client/links/httpBatchLink.ts b/packages/trpc/client/links/httpBatchLink.ts
deleted file mode 100644
index 382865905e..0000000000
--- a/packages/trpc/client/links/httpBatchLink.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "@trpc/client/links/httpBatchLink";
diff --git a/packages/trpc/client/links/httpLink.ts b/packages/trpc/client/links/httpLink.ts
deleted file mode 100644
index 9afdba2f05..0000000000
--- a/packages/trpc/client/links/httpLink.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "@trpc/client/links/httpLink";
diff --git a/packages/trpc/client/links/loggerLink.ts b/packages/trpc/client/links/loggerLink.ts
deleted file mode 100644
index cbf08ae39c..0000000000
--- a/packages/trpc/client/links/loggerLink.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "@trpc/client/links/loggerLink";
diff --git a/packages/trpc/client/links/splitLink.ts b/packages/trpc/client/links/splitLink.ts
deleted file mode 100644
index ce2279c13b..0000000000
--- a/packages/trpc/client/links/splitLink.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "@trpc/client/links/splitLink";
diff --git a/packages/trpc/package.json b/packages/trpc/package.json
index fa90e639d0..52854a7353 100644
--- a/packages/trpc/package.json
+++ b/packages/trpc/package.json
@@ -11,11 +11,11 @@
     "lint:fix": "eslint . --ext .ts,.tsx --fix"
   },
   "dependencies": {
-    "@tanstack/react-query": "^4.3.9",
-    "@trpc/client": "^10.13.0",
-    "@trpc/next": "^10.13.0",
-    "@trpc/react-query": "^10.13.0",
-    "@trpc/server": "^10.13.0",
+    "@tanstack/react-query": "^5.17.15",
+    "@trpc/client": "11.0.0-next-beta.222",
+    "@trpc/next": "11.0.0-next-beta.222",
+    "@trpc/react-query": "11.0.0-next-beta.222",
+    "@trpc/server": "11.0.0-next-beta.222",
     "superjson": "1.9.1",
     "zod": "^3.22.2"
   }
diff --git a/packages/trpc/react/server.ts b/packages/trpc/react/server.ts
new file mode 100644
index 0000000000..5ddde6fedd
--- /dev/null
+++ b/packages/trpc/react/server.ts
@@ -0,0 +1 @@
+export * from "@trpc/react-query/server";
diff --git a/packages/trpc/react/ssg.ts b/packages/trpc/react/ssg.ts
deleted file mode 100644
index bebd50c037..0000000000
--- a/packages/trpc/react/ssg.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "@trpc/react-query/ssg";
diff --git a/packages/trpc/react/trpc.ts b/packages/trpc/react/trpc.ts
index 3d1167b775..68aaadb841 100644
--- a/packages/trpc/react/trpc.ts
+++ b/packages/trpc/react/trpc.ts
@@ -1,18 +1,20 @@
 import type { NextPageContext } from "next/types";
 import superjson from "superjson";
 
-import { httpBatchLink } from "../client/links/httpBatchLink";
-import { httpLink } from "../client/links/httpLink";
-import { loggerLink } from "../client/links/loggerLink";
-import { splitLink } from "../client/links/splitLink";
+import { httpBatchLink } from "../client";
+import { httpLink } from "../client";
+import { loggerLink } from "../client";
+import { splitLink } from "../client";
 import { createTRPCNext } from "../next";
 // ℹ️ Type-only import:
 // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
 import type { TRPCClientErrorLike } from "../react";
-import type { inferRouterInputs, inferRouterOutputs, Maybe } from "../server";
+import type { inferRouterInputs, inferRouterOutputs } from "../server";
 import type { AppRouter } from "../server/routers/_app";
 import { ENDPOINTS } from "./shared";
 
+type Maybe<T> = T | null | undefined;
+
 /**
  * We deploy our tRPC router on multiple lambdas to keep number of imports as small as possible
  * TODO: Make this dynamic based on folders in trpc server?
@@ -47,7 +49,7 @@ const resolveEndpoint = (links: any) => {
  * A set of strongly-typed React hooks from your `AppRouter` type signature with `createTRPCReact`.
  * @link https://trpc.io/docs/v10/react#2-create-trpc-hooks
  */
-export const trpc = createTRPCNext<AppRouter, NextPageContext, "ExperimentalSuspense">({
+export const trpc = createTRPCNext<AppRouter, NextPageContext>({
   config() {
     const url =
       typeof window !== "undefined"
diff --git a/packages/trpc/server/createContext.ts b/packages/trpc/server/createContext.ts
index b1f7a68b21..48f498a408 100644
--- a/packages/trpc/server/createContext.ts
+++ b/packages/trpc/server/createContext.ts
@@ -10,7 +10,11 @@ import type { SelectedCalendar, User as PrismaUser } from "@calcom/prisma/client
 
 import type { CreateNextContextOptions } from "@trpc/server/adapters/next";
 
-type CreateContextOptions = CreateNextContextOptions | GetServerSidePropsContext;
+type CreateContextOptions =
+  | (Omit<CreateNextContextOptions, "info"> & {
+      info?: CreateNextContextOptions["info"];
+    })
+  | GetServerSidePropsContext;
 
 export type CreateInnerContextOptions = {
   sourceIp?: string;
@@ -48,7 +52,7 @@ export type GetSessionFn =
  *
  * Also useful for:
  * - testing, so you don't have to mock Next.js' `req`/`res`
- * - tRPC's `createSSGHelpers` where we don't have `req`/`res`
+ * - tRPC's `createServerSideHelpers` where we don't have `req`/`res`
  *
  * @see https://trpc.io/docs/context#inner-and-outer-context
  */
diff --git a/packages/trpc/server/createNextApiHandler.ts b/packages/trpc/server/createNextApiHandler.ts
index 9df0e23bbd..710464f9ac 100644
--- a/packages/trpc/server/createNextApiHandler.ts
+++ b/packages/trpc/server/createNextApiHandler.ts
@@ -14,8 +14,8 @@ export function createNextApiHandler(router: AnyRouter, isPublic = false, namesp
     /**
      * @link https://trpc.io/docs/context
      */
-    createContext: ({ req, res }) => {
-      return createTrpcContext({ req, res });
+    createContext: (opts) => {
+      return createTrpcContext(opts);
     },
     /**
      * @link https://trpc.io/docs/error-handling
diff --git a/packages/trpc/server/middlewares/sessionMiddleware.ts b/packages/trpc/server/middlewares/sessionMiddleware.ts
index 3eae4eb1a8..92bdc47f72 100644
--- a/packages/trpc/server/middlewares/sessionMiddleware.ts
+++ b/packages/trpc/server/middlewares/sessionMiddleware.ts
@@ -5,12 +5,13 @@ import logger from "@calcom/lib/logger";
 import { MembershipRole } from "@calcom/prisma/enums";
 import { teamMetadataSchema, userMetadata } from "@calcom/prisma/zod-utils";
 
-import type { Maybe } from "@trpc/server";
 import { TRPCError } from "@trpc/server";
 
 import type { TRPCContextInner } from "../createContext";
 import { middleware } from "../trpc";
 
+type Maybe<T> = T | null | undefined;
+
 export async function getUserFromSession(ctx: TRPCContextInner, session: Maybe<Session>) {
   const { prisma } = ctx;
   if (!session?.user?.id) {
@@ -161,7 +162,7 @@ export const isAuthed = middleware(async ({ ctx, next }) => {
   }
 
   return next({
-    ctx: { ...ctx, user, session },
+    ctx: { user, session },
   });
 });
 
@@ -170,7 +171,7 @@ export const isAdminMiddleware = isAuthed.unstable_pipe(({ ctx, next }) => {
   if (user?.role !== "ADMIN") {
     throw new TRPCError({ code: "UNAUTHORIZED" });
   }
-  return next({ ctx: { ...ctx, user: user } });
+  return next({ ctx: { user: user } });
 });
 
 // Org admins can be admins or owners
@@ -179,7 +180,7 @@ export const isOrgAdminMiddleware = isAuthed.unstable_pipe(({ ctx, next }) => {
   if (!user?.organization?.isOrgAdmin) {
     throw new TRPCError({ code: "UNAUTHORIZED" });
   }
-  return next({ ctx: { ...ctx, user: user } });
+  return next({ ctx: { user: user } });
 });
 
 export default sessionMiddleware;
diff --git a/packages/ui/components/apps/AppCard.tsx b/packages/ui/components/apps/AppCard.tsx
index 34544221e8..411d7071d3 100644
--- a/packages/ui/components/apps/AppCard.tsx
+++ b/packages/ui/components/apps/AppCard.tsx
@@ -254,9 +254,9 @@ const InstallAppButtonChild = ({
         <DropdownMenuContent
           className="w-56"
           onInteractOutside={(event) => {
-            if (mutation.isLoading) event.preventDefault();
+            if (mutation.isPending) event.preventDefault();
           }}>
-          {mutation.isLoading && (
+          {mutation.isPending && (
             <div className="z-1 fixed inset-0 flex items-center justify-center">
               <Spinner />
             </div>
diff --git a/packages/ui/components/avatar/Avatar.tsx b/packages/ui/components/avatar/Avatar.tsx
index 5e333d9519..e06b20d541 100644
--- a/packages/ui/components/avatar/Avatar.tsx
+++ b/packages/ui/components/avatar/Avatar.tsx
@@ -5,10 +5,10 @@ import Link from "next/link";
 import classNames from "@calcom/lib/classNames";
 import { AVATAR_FALLBACK } from "@calcom/lib/constants";
 
-import type { Maybe } from "@trpc/server";
-
 import { Tooltip } from "../tooltip";
 
+type Maybe<T> = T | null | undefined;
+
 export type AvatarProps = {
   className?: string;
   size?: "xxs" | "xs" | "xsm" | "sm" | "md" | "mdLg" | "lg" | "xl";
diff --git a/packages/ui/components/createButton/CreateButton.tsx b/packages/ui/components/createButton/CreateButton.tsx
index eb4818983a..16ab4d5b53 100644
--- a/packages/ui/components/createButton/CreateButton.tsx
+++ b/packages/ui/components/createButton/CreateButton.tsx
@@ -28,7 +28,7 @@ export type CreateBtnProps = {
   createFunction?: (teamId?: number) => void;
   subtitle?: string;
   buttonText?: string;
-  isLoading?: boolean;
+  isPending?: boolean;
   disableMobileButton?: boolean;
   "data-testid"?: string;
   color?: ButtonColor;
@@ -46,7 +46,7 @@ export function CreateButton(props: CreateBtnProps) {
   const {
     createDialog,
     options,
-    isLoading,
+    isPending,
     createFunction,
     buttonText,
     disableMobileButton,
@@ -85,7 +85,7 @@ export function CreateButton(props: CreateBtnProps) {
           }
           data-testid="create-button"
           StartIcon={Plus}
-          loading={isLoading}
+          loading={isPending}
           variant={disableMobileButton ? "button" : "fab"}
           {...restProps}>
           {buttonText ? buttonText : t("new")}
@@ -97,7 +97,7 @@ export function CreateButton(props: CreateBtnProps) {
               variant={disableMobileButton ? "button" : "fab"}
               StartIcon={Plus}
               data-testid="create-button-dropdown"
-              loading={isLoading}
+              loading={isPending}
               {...restProps}>
               {buttonText ? buttonText : t("new")}
             </Button>
diff --git a/packages/ui/components/data-table/__storybook__/datatable.stories.mdx b/packages/ui/components/data-table/__storybook__/datatable.stories.mdx
index c491d15f23..37e33e5d0b 100644
--- a/packages/ui/components/data-table/__storybook__/datatable.stories.mdx
+++ b/packages/ui/components/data-table/__storybook__/datatable.stories.mdx
@@ -36,7 +36,7 @@ The `DataTable` setup for tabular data, with columns, virtual scroll, sticky hea
     args={{
       columns: columns,
       data: dataTableDemousers,
-      isLoading: false,
+      isPending: false,
       searchKey: "username",
       filterableItems: filterableItems,
       tableContainerRef: { current: null },
diff --git a/packages/ui/components/data-table/index.tsx b/packages/ui/components/data-table/index.tsx
index 7f36f10ea9..d2b78845c6 100644
--- a/packages/ui/components/data-table/index.tsx
+++ b/packages/ui/components/data-table/index.tsx
@@ -33,7 +33,7 @@ export interface DataTableProps<TData, TValue> {
   filterableItems?: FilterableItems;
   selectionOptions?: ActionItem<TData>[];
   tableCTA?: React.ReactNode;
-  isLoading?: boolean;
+  isPending?: boolean;
   onRowMouseclick?: (row: Row<TData>) => void;
   onScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
   CTA?: React.ReactNode;
@@ -49,7 +49,7 @@ export function DataTable<TData, TValue>({
   searchKey,
   selectionOptions,
   tableContainerRef,
-  isLoading,
+  isPending,
   tableOverlay,
   variant,
   /** This should only really be used if you dont have actions in a row. */
@@ -127,7 +127,7 @@ export function DataTable<TData, TValue>({
                 <td style={{ height: `${paddingTop}px` }} />
               </tr>
             )}
-            {virtualRows && !isLoading ? (
+            {virtualRows && !isPending ? (
               virtualRows.map((virtualRow) => {
                 const row = rows[virtualRow.index] as Row<TData>;
                 return (
diff --git a/packages/ui/components/dialog/ConfirmationDialogContent.tsx b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
index c615a81acc..15aa475d2d 100644
--- a/packages/ui/components/dialog/ConfirmationDialogContent.tsx
+++ b/packages/ui/components/dialog/ConfirmationDialogContent.tsx
@@ -13,7 +13,7 @@ type ConfirmBtnType =
 
 export type ConfirmationDialogContentProps = {
   cancelBtnText?: string;
-  isLoading?: boolean;
+  isPending?: boolean;
   loadingText?: string;
   onConfirm?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
   title: string;
@@ -29,7 +29,7 @@ export function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationD
     confirmBtnText = t("confirm"),
     cancelBtnText = t("cancel"),
     loadingText = t("loading"),
-    isLoading = false,
+    isPending = false,
     onConfirm,
     children,
   } = props;
@@ -71,13 +71,13 @@ export function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationD
         ) : (
           <DialogClose
             color="primary"
-            loading={isLoading}
+            loading={isPending}
             onClick={(e) => onConfirm && onConfirm(e)}
             data-testid="dialog-confirmation">
-            {isLoading ? loadingText : confirmBtnText}
+            {isPending ? loadingText : confirmBtnText}
           </DialogClose>
         )}
-        <DialogClose disabled={isLoading}>{cancelBtnText}</DialogClose>
+        <DialogClose disabled={isPending}>{cancelBtnText}</DialogClose>
       </div>
     </DialogContent>
   );
diff --git a/packages/ui/components/form/timezone-select/TimezoneSelect.tsx b/packages/ui/components/form/timezone-select/TimezoneSelect.tsx
index 1f8eff0398..8de63e9a3b 100644
--- a/packages/ui/components/form/timezone-select/TimezoneSelect.tsx
+++ b/packages/ui/components/form/timezone-select/TimezoneSelect.tsx
@@ -22,7 +22,7 @@ export function TimezoneSelect({
   ...props
 }: SelectProps & { variant?: "default" | "minimal" }) {
   const [cities, setCities] = useState<ICity[]>([]);
-  const { data, isLoading } = trpc.viewer.public.cityTimezones.useQuery(undefined, {
+  const { data, isPending } = trpc.viewer.public.cityTimezones.useQuery(undefined, {
     trpc: { context: { skipBatch: true } },
   });
   const handleInputChange = (tz: string) => {
@@ -39,8 +39,8 @@ export function TimezoneSelect({
     <BaseSelect
       value={value}
       className={className}
-      isLoading={isLoading}
-      isDisabled={isLoading}
+      isLoading={isPending}
+      isDisabled={isPending}
       {...reactSelectProps}
       timezones={{
         ...(data ? addCitiesToDropdown(data) : {}),
diff --git a/packages/ui/components/form/timezone-select/timezoneSelect.stories.mdx b/packages/ui/components/form/timezone-select/timezoneSelect.stories.mdx
index ea5ecb5744..457d647aa8 100644
--- a/packages/ui/components/form/timezone-select/timezoneSelect.stories.mdx
+++ b/packages/ui/components/form/timezone-select/timezoneSelect.stories.mdx
@@ -57,7 +57,7 @@ The `TimezoneSelect` component can be used to display timezone options.
         "Timezone 2": "City 2",
         "Timezone 3": "City 3",
       },
-      isLoading: false,
+      isPending: false,
     }}
     argTypes={{
       value: {
diff --git a/packages/ui/components/form/wizard/WizardForm.tsx b/packages/ui/components/form/wizard/WizardForm.tsx
index 72fcf9aeb1..5a67c52008 100644
--- a/packages/ui/components/form/wizard/WizardForm.tsx
+++ b/packages/ui/components/form/wizard/WizardForm.tsx
@@ -14,9 +14,9 @@ type DefaultStep = {
   containerClassname?: string;
   contentClassname?: string;
   description: string;
-  content?: ((setIsLoading: Dispatch<SetStateAction<boolean>>) => JSX.Element) | JSX.Element;
+  content?: ((setIsPending: Dispatch<SetStateAction<boolean>>) => JSX.Element) | JSX.Element;
   isEnabled?: boolean;
-  isLoading?: boolean;
+  isPending?: boolean;
 };
 
 function WizardForm<T extends DefaultStep>(props: {
@@ -37,10 +37,10 @@ function WizardForm<T extends DefaultStep>(props: {
   const setStep = (newStep: number) => {
     router.replace(`${href}?step=${newStep || 1}`);
   };
-  const [currentStepIsLoading, setCurrentStepIsLoading] = useState(false);
+  const [currentStepisPending, setCurrentStepisPending] = useState(false);
 
   useEffect(() => {
-    setCurrentStepIsLoading(false);
+    setCurrentStepisPending(false);
   }, [currentStep]);
 
   return (
@@ -67,7 +67,7 @@ function WizardForm<T extends DefaultStep>(props: {
       <div className={classNames("mb-8 overflow-hidden md:w-[700px]", props.containerClassname)}>
         <div className={classNames("print:p-none max-w-3xl px-8 py-5 sm:p-6", currentStep.contentClassname)}>
           {typeof currentStep.content === "function"
-            ? currentStep.content(setCurrentStepIsLoading)
+            ? currentStep.content(setCurrentStepisPending)
             : currentStep.content}
         </div>
         {!props.disableNavigation && (
@@ -84,7 +84,7 @@ function WizardForm<T extends DefaultStep>(props: {
 
             <Button
               tabIndex={0}
-              loading={currentStepIsLoading}
+              loading={currentStepisPending}
               type="submit"
               color="primary"
               form={`wizard-step-${step}`}
diff --git a/packages/ui/components/form/wizard/wizardForm.test.tsx b/packages/ui/components/form/wizard/wizardForm.test.tsx
index e52a5b5f8f..495c5f7985 100644
--- a/packages/ui/components/form/wizard/wizardForm.test.tsx
+++ b/packages/ui/components/form/wizard/wizardForm.test.tsx
@@ -29,8 +29,8 @@ const steps = [
   {
     title: "Step 2",
     description: "Description 2",
-    content: (setIsLoading: (value: boolean) => void) => (
-      <button data-testid="content-2" onClick={() => setIsLoading(true)}>
+    content: (setIsPending: (value: boolean) => void) => (
+      <button data-testid="content-2" onClick={() => setIsPending(true)}>
         Test
       </button>
     ),
diff --git a/packages/ui/form/PhoneInput.tsx b/packages/ui/form/PhoneInput.tsx
index 3c82f2950d..eaf36e3089 100644
--- a/packages/ui/form/PhoneInput.tsx
+++ b/packages/ui/form/PhoneInput.tsx
@@ -68,11 +68,15 @@ function BasePhoneInput({ name, className = "", onChange, ...rest }: PhoneInputP
 
 const useDefaultCountry = () => {
   const [defaultCountry, setDefaultCountry] = useState("us");
-  trpc.viewer.public.countryCode.useQuery(undefined, {
+  const query = trpc.viewer.public.countryCode.useQuery(undefined, {
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
     retry: false,
-    onSuccess: (data) => {
+  });
+
+  useEffect(
+    function refactorMeWithoutEffect() {
+      const data = query.data;
       if (!data?.countryCode) {
         return;
       }
@@ -81,7 +85,8 @@ const useDefaultCountry = () => {
         ? setDefaultCountry(data.countryCode.toLowerCase())
         : setDefaultCountry(navigator.language.split("-")[1]?.toLowerCase() || "us");
     },
-  });
+    [query.data]
+  );
 
   return defaultCountry;
 };
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 5e16ab39d5..b65d233389 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -35,7 +35,7 @@
     "@react-icons/all-files": "^4.1.0",
     "@storybook/blocks": "^7.6.3",
     "@storybook/react": "^7.6.3",
-    "@tanstack/react-query": "^4.3.9",
+    "@tanstack/react-query": "^5.17.15",
     "@tanstack/react-table": "^8.9.3",
     "@wojtekmaj/react-daterange-picker": "^3.3.1",
     "class-variance-authority": "^0.4.0",
diff --git a/yarn.lock b/yarn.lock
index efe3e98f05..4793e4e1e0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1397,25 +1397,25 @@ __metadata:
   linkType: hard
 
 "@babel/core@npm:^7.14.0, @babel/core@npm:^7.22.9":
-  version: 7.23.6
-  resolution: "@babel/core@npm:7.23.6"
+  version: 7.23.7
+  resolution: "@babel/core@npm:7.23.7"
   dependencies:
     "@ampproject/remapping": ^2.2.0
     "@babel/code-frame": ^7.23.5
     "@babel/generator": ^7.23.6
     "@babel/helper-compilation-targets": ^7.23.6
     "@babel/helper-module-transforms": ^7.23.3
-    "@babel/helpers": ^7.23.6
+    "@babel/helpers": ^7.23.7
     "@babel/parser": ^7.23.6
     "@babel/template": ^7.22.15
-    "@babel/traverse": ^7.23.6
+    "@babel/traverse": ^7.23.7
     "@babel/types": ^7.23.6
     convert-source-map: ^2.0.0
     debug: ^4.1.0
     gensync: ^1.0.0-beta.2
     json5: ^2.2.3
     semver: ^6.3.1
-  checksum: 4bddd1b80394a64b2ee33eeb216e8a2a49ad3d74f0ca9ba678c84a37f4502b2540662d72530d78228a2a349fda837fa852eea5cd3ae28465d1188acc6055868e
+  checksum: 32d5bf73372a47429afaae9adb0af39e47bcea6a831c4b5dcbb4791380cda6949cb8cb1a2fea8b60bb1ebe189209c80e333903df1fa8e9dcb04798c0ce5bf59e
   languageName: node
   linkType: hard
 
@@ -1536,8 +1536,8 @@ __metadata:
   linkType: hard
 
 "@babel/helper-create-class-features-plugin@npm:^7.18.6":
-  version: 7.23.6
-  resolution: "@babel/helper-create-class-features-plugin@npm:7.23.6"
+  version: 7.23.7
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.23.7"
   dependencies:
     "@babel/helper-annotate-as-pure": ^7.22.5
     "@babel/helper-environment-visitor": ^7.22.20
@@ -1550,7 +1550,7 @@ __metadata:
     semver: ^6.3.1
   peerDependencies:
     "@babel/core": ^7.0.0
-  checksum: 356b71b9f4a3a95917432bf6a452f475a292d394d9310e9c8b23c8edb564bee91e40d4290b8aa8779d2987a7c39ae717b2d76edc7c952078b8952df1a20259e3
+  checksum: 33e60714b856c3816a7965d4c76278cc8f430644a2dfc4eeafad2f7167c4fbd2becdb74cbfeb04b02efd6bbd07176ef53c6683262b588e65d378438e9c55c26b
   languageName: node
   linkType: hard
 
@@ -1906,14 +1906,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/helpers@npm:7.23.6"
+"@babel/helpers@npm:^7.23.7":
+  version: 7.23.8
+  resolution: "@babel/helpers@npm:7.23.8"
   dependencies:
     "@babel/template": ^7.22.15
-    "@babel/traverse": ^7.23.6
+    "@babel/traverse": ^7.23.7
     "@babel/types": ^7.23.6
-  checksum: c5ba62497e1d717161d107c4b3de727565c68b6b9f50f59d6298e613afeca8895799b227c256e06d362e565aec34e26fb5c675b9c3d25055c52b945a21c21e21
+  checksum: 8b522d527921f8df45a983dc7b8e790c021250addf81ba7900ba016e165442a527348f6f877aa55e1debb3eef9e860a334b4e8d834e6c9b438ed61a63d9a7ad4
   languageName: node
   linkType: hard
 
@@ -2409,7 +2409,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.0.0, @babel/plugin-transform-classes@npm:^7.23.5":
+"@babel/plugin-transform-classes@npm:^7.0.0":
+  version: 7.23.8
+  resolution: "@babel/plugin-transform-classes@npm:7.23.8"
+  dependencies:
+    "@babel/helper-annotate-as-pure": ^7.22.5
+    "@babel/helper-compilation-targets": ^7.23.6
+    "@babel/helper-environment-visitor": ^7.22.20
+    "@babel/helper-function-name": ^7.23.0
+    "@babel/helper-plugin-utils": ^7.22.5
+    "@babel/helper-replace-supers": ^7.22.20
+    "@babel/helper-split-export-declaration": ^7.22.6
+    globals: ^11.1.0
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 7dee6cebe52131d2d16944f36e1fdb9d4b24f44d0e7e450f93a44435d001f17cc0789a4cb6b15ec67c8e484581b8a730b5c3ec374470f29ff0133086955b8c58
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-classes@npm:^7.23.5":
   version: 7.23.5
   resolution: "@babel/plugin-transform-classes@npm:7.23.5"
   dependencies:
@@ -3281,11 +3299,11 @@ __metadata:
   linkType: hard
 
 "@babel/runtime@npm:^7.21.0":
-  version: 7.23.6
-  resolution: "@babel/runtime@npm:7.23.6"
+  version: 7.23.8
+  resolution: "@babel/runtime@npm:7.23.8"
   dependencies:
     regenerator-runtime: ^0.14.0
-  checksum: 1a8eaf3d3a103ef5227b60ca7ab5c589118c36ca65ef2d64e65380b32a98a3f3b5b3ef96660fa0471b079a18b619a8317f3e7f03ab2b930c45282a8b69ed9a16
+  checksum: 0bd5543c26811153822a9f382fd39886f66825ff2a397a19008011376533747cd05c33a91f6248c0b8b0edf0448d7c167ebfba34786088f1b7eb11c65be7dfc3
   languageName: node
   linkType: hard
 
@@ -3298,7 +3316,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.18.10, @babel/template@npm:^7.22.15":
+"@babel/template@npm:^7.18.10, @babel/template@npm:^7.20.7, @babel/template@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
   dependencies:
@@ -3338,9 +3356,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.14.0, @babel/traverse@npm:^7.16.8, @babel/traverse@npm:^7.23.6":
-  version: 7.23.6
-  resolution: "@babel/traverse@npm:7.23.6"
+"@babel/traverse@npm:^7.14.0, @babel/traverse@npm:^7.16.8, @babel/traverse@npm:^7.23.7":
+  version: 7.23.7
+  resolution: "@babel/traverse@npm:7.23.7"
   dependencies:
     "@babel/code-frame": ^7.23.5
     "@babel/generator": ^7.23.6
@@ -3352,7 +3370,7 @@ __metadata:
     "@babel/types": ^7.23.6
     debug: ^4.3.1
     globals: ^11.1.0
-  checksum: 48f2eac0e86b6cb60dab13a5ea6a26ba45c450262fccdffc334c01089e75935f7546be195e260e97f6e43cea419862eda095018531a2718fef8189153d479f88
+  checksum: d4a7afb922361f710efc97b1e25ec343fab8b2a4ddc81ca84f9a153f22d4482112cba8f263774be8d297918b6c4767c7a98988ab4e53ac73686c986711dd002e
   languageName: node
   linkType: hard
 
@@ -4583,11 +4601,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@calcom/trpc@workspace:packages/trpc"
   dependencies:
-    "@tanstack/react-query": ^4.3.9
-    "@trpc/client": ^10.13.0
-    "@trpc/next": ^10.13.0
-    "@trpc/react-query": ^10.13.0
-    "@trpc/server": ^10.13.0
+    "@tanstack/react-query": ^5.17.15
+    "@trpc/client": 11.0.0-next-beta.222
+    "@trpc/next": 11.0.0-next-beta.222
+    "@trpc/react-query": 11.0.0-next-beta.222
+    "@trpc/server": 11.0.0-next-beta.222
     superjson: 1.9.1
     zod: ^3.22.2
   languageName: unknown
@@ -4633,7 +4651,7 @@ __metadata:
     "@react-icons/all-files": ^4.1.0
     "@storybook/blocks": ^7.6.3
     "@storybook/react": ^7.6.3
-    "@tanstack/react-query": ^4.3.9
+    "@tanstack/react-query": ^5.17.15
     "@tanstack/react-table": ^8.9.3
     "@types/react": 18.0.26
     "@types/react-dom": ^18.0.9
@@ -4730,7 +4748,7 @@ __metadata:
     "@sentry/nextjs": ^7.73.0
     "@stripe/react-stripe-js": ^1.10.0
     "@stripe/stripe-js": ^1.35.0
-    "@tanstack/react-query": ^4.3.9
+    "@tanstack/react-query": ^5.17.15
     "@testing-library/react": ^13.3.0
     "@tremor/react": ^2.0.0
     "@types/accept-language-parser": 1.5.2
@@ -6311,15 +6329,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graphql-codegen/add@npm:^5.0.1":
+  version: 5.0.1
+  resolution: "@graphql-codegen/add@npm:5.0.1"
+  dependencies:
+    "@graphql-codegen/plugin-helpers": ^5.0.2
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: d95fe9a396a11e10c328300203807751b608e1217fa0904b6f7b4ff85844ea1a4425289f8c8cddf524dcd3116b0946fa8467c097a95b17d5267c72f5fcbbc359
+  languageName: node
+  linkType: hard
+
 "@graphql-codegen/cli@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "@graphql-codegen/cli@npm:5.0.0"
+  version: 5.0.1
+  resolution: "@graphql-codegen/cli@npm:5.0.1"
   dependencies:
     "@babel/generator": ^7.18.13
     "@babel/template": ^7.18.10
     "@babel/types": ^7.18.13
-    "@graphql-codegen/core": ^4.0.0
-    "@graphql-codegen/plugin-helpers": ^5.0.1
+    "@graphql-codegen/client-preset": ^4.2.0
+    "@graphql-codegen/core": ^4.0.1
+    "@graphql-codegen/plugin-helpers": ^5.0.2
     "@graphql-tools/apollo-engine-loader": ^8.0.0
     "@graphql-tools/code-file-loader": ^8.0.0
     "@graphql-tools/git-loader": ^8.0.0
@@ -6360,103 +6391,141 @@ __metadata:
     graphql-code-generator: cjs/bin.js
     graphql-codegen: cjs/bin.js
     graphql-codegen-esm: esm/bin.js
-  checksum: 55c3cafb08ee33667a896aa1c56e27ff2b6eae123d6116ff299be308038a543fb7d58c4179f34a3dff64079065d549dc05bfd95208c8c3024cecdd6307c0353b
+  checksum: 63539e80153369bac47aca062fb26b3b84b65c4188a954d9b8e6b3830ddca2ba233c0abc48795c80eea2a02a2bd0f05172ba4796cec0cb8bd4191205e8097bc3
   languageName: node
   linkType: hard
 
-"@graphql-codegen/core@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@graphql-codegen/core@npm:4.0.0"
+"@graphql-codegen/client-preset@npm:^4.2.0":
+  version: 4.2.0
+  resolution: "@graphql-codegen/client-preset@npm:4.2.0"
   dependencies:
-    "@graphql-codegen/plugin-helpers": ^5.0.0
-    "@graphql-tools/schema": ^10.0.0
+    "@babel/helper-plugin-utils": ^7.20.2
+    "@babel/template": ^7.20.7
+    "@graphql-codegen/add": ^5.0.1
+    "@graphql-codegen/gql-tag-operations": 4.0.2
+    "@graphql-codegen/plugin-helpers": ^5.0.2
+    "@graphql-codegen/typed-document-node": ^5.0.2
+    "@graphql-codegen/typescript": ^4.0.2
+    "@graphql-codegen/typescript-operations": ^4.1.0
+    "@graphql-codegen/visitor-plugin-common": ^4.1.0
+    "@graphql-tools/documents": ^1.0.0
     "@graphql-tools/utils": ^10.0.0
-    tslib: ~2.5.0
+    "@graphql-typed-document-node/core": 3.2.0
+    tslib: ~2.6.0
   peerDependencies:
     graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
-  checksum: 9824a5ec26fe25379f64e4ea94402487acde2a880d6bfcbd55ac9f0681c887a814fd9093cc789e09273108b7ea6df0c04fc8acc8dd55eab3918d0d07af62dffd
+  checksum: a10908d7ec657455c96ac627e461c9ad775d6b5ec7e57065678f2b8dd34748084ce14f5225a2f44057dd61b20510b5e0811b660aa025919c9ac00e9b6740b5bd
   languageName: node
   linkType: hard
 
-"@graphql-codegen/plugin-helpers@npm:^5.0.0, @graphql-codegen/plugin-helpers@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "@graphql-codegen/plugin-helpers@npm:5.0.1"
+"@graphql-codegen/core@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "@graphql-codegen/core@npm:4.0.1"
+  dependencies:
+    "@graphql-codegen/plugin-helpers": ^5.0.2
+    "@graphql-tools/schema": ^10.0.0
+    "@graphql-tools/utils": ^10.0.0
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: 1211015ff8d8ff1e08660cd17f0e6741434abebcfb35c8e16c94a90da69891d70a7592f2b0d794af7c15a91923a443c5bdeb7c27c69cdbb2901f42c769bc8a92
+  languageName: node
+  linkType: hard
+
+"@graphql-codegen/gql-tag-operations@npm:4.0.2":
+  version: 4.0.2
+  resolution: "@graphql-codegen/gql-tag-operations@npm:4.0.2"
+  dependencies:
+    "@graphql-codegen/plugin-helpers": ^5.0.2
+    "@graphql-codegen/visitor-plugin-common": 4.1.0
+    "@graphql-tools/utils": ^10.0.0
+    auto-bind: ~4.0.0
+    tslib: ~2.6.0
+  peerDependencies:
+    graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
+  checksum: ccdfe45a467f8e9855a48e248d3d30ae6d6f070a062b40df83044ee8252a481c79efdbf5e607e059fd0cfe24c28c509ffd3fc495575c89d2e76c44daf100a16d
+  languageName: node
+  linkType: hard
+
+"@graphql-codegen/plugin-helpers@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@graphql-codegen/plugin-helpers@npm:5.0.2"
   dependencies:
     "@graphql-tools/utils": ^10.0.0
     change-case-all: 1.0.15
     common-tags: 1.8.2
     import-from: 4.0.0
     lodash: ~4.17.0
-    tslib: ~2.5.0
+    tslib: ~2.6.0
   peerDependencies:
     graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
-  checksum: 97faa8f87f41292bb5263097b1613733faf07fd0ff375ac89438aa0f2cd91e163d088b63dcafcdb6d66beaba8f7d13005bb980793e71979e9ad61fdfd206a730
+  checksum: 6f817e1fb9fd05e6da159138e81e53ea0d0fe43e074aa6870d09569d12ed918cc1e49a738219942e142090dd642067e2f23c8a30ff07826fd05d0dd99cb73179
   languageName: node
   linkType: hard
 
-"@graphql-codegen/schema-ast@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "@graphql-codegen/schema-ast@npm:4.0.0"
+"@graphql-codegen/schema-ast@npm:^4.0.1":
+  version: 4.0.1
+  resolution: "@graphql-codegen/schema-ast@npm:4.0.1"
   dependencies:
-    "@graphql-codegen/plugin-helpers": ^5.0.0
+    "@graphql-codegen/plugin-helpers": ^5.0.2
     "@graphql-tools/utils": ^10.0.0
-    tslib: ~2.5.0
+    tslib: ~2.6.0
   peerDependencies:
     graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
-  checksum: 5950b57b383c14476080108d8ef7ebe569446ac20fbf54371ecc051392c80ef4b28b16b33fcb06faa892213bed90fc72940bc46a9852e0f02491491811e6a47e
+  checksum: 78c974a899c72cfd87dc0cb451b5f36c80e55a4dd69c8a91d3206d8bf34e406f559d26876c0b56ce7e5c61587f3ab19ca3de7ded8cf718e3b0b2016b4121d95a
   languageName: node
   linkType: hard
 
-"@graphql-codegen/typed-document-node@npm:^5.0.1":
-  version: 5.0.1
-  resolution: "@graphql-codegen/typed-document-node@npm:5.0.1"
+"@graphql-codegen/typed-document-node@npm:^5.0.1, @graphql-codegen/typed-document-node@npm:^5.0.2":
+  version: 5.0.2
+  resolution: "@graphql-codegen/typed-document-node@npm:5.0.2"
   dependencies:
-    "@graphql-codegen/plugin-helpers": ^5.0.0
-    "@graphql-codegen/visitor-plugin-common": 4.0.1
+    "@graphql-codegen/plugin-helpers": ^5.0.2
+    "@graphql-codegen/visitor-plugin-common": 4.1.0
     auto-bind: ~4.0.0
     change-case-all: 1.0.15
-    tslib: ~2.5.0
+    tslib: ~2.6.0
   peerDependencies:
     graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
-  checksum: d1e9d88b0d7796de034769d1c7c02be16cbc3710c00a198e4431034d51c7fb8f56c4ba418ff53c9647898649d07eb9c26fb09f11111d79fa1cc83b34decb6e69
+  checksum: 3ef46e79b16894b83fde20aafad84d0ad98ec8d511c3e22a74176f4de193679707d5120fea48da4fb422264c79036da7dd6fc045b552416dccf9d95bc0e6b7b7
   languageName: node
   linkType: hard
 
-"@graphql-codegen/typescript-operations@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "@graphql-codegen/typescript-operations@npm:4.0.1"
+"@graphql-codegen/typescript-operations@npm:^4.0.1, @graphql-codegen/typescript-operations@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "@graphql-codegen/typescript-operations@npm:4.1.0"
   dependencies:
-    "@graphql-codegen/plugin-helpers": ^5.0.0
-    "@graphql-codegen/typescript": ^4.0.1
-    "@graphql-codegen/visitor-plugin-common": 4.0.1
+    "@graphql-codegen/plugin-helpers": ^5.0.2
+    "@graphql-codegen/typescript": ^4.0.2
+    "@graphql-codegen/visitor-plugin-common": 4.1.0
     auto-bind: ~4.0.0
-    tslib: ~2.5.0
+    tslib: ~2.6.0
   peerDependencies:
     graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
-  checksum: 82cd58ceb7406a3ff7aa5b36a58c9303fd819259679c2de10411f9e22c4fd142068d711714f68259c64eab86ea0a2b3d761959fa59fa5140ca3f1382a5ab5169
+  checksum: 9f9b72df80519b0153d11686eae734629a2b9e651e90a609cfeeb59525539d80031f3643bd8d56739670381430aafedcd6023b679bf5557cd5219ce8639afd1b
   languageName: node
   linkType: hard
 
-"@graphql-codegen/typescript@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "@graphql-codegen/typescript@npm:4.0.1"
+"@graphql-codegen/typescript@npm:^4.0.1, @graphql-codegen/typescript@npm:^4.0.2":
+  version: 4.0.2
+  resolution: "@graphql-codegen/typescript@npm:4.0.2"
   dependencies:
-    "@graphql-codegen/plugin-helpers": ^5.0.0
-    "@graphql-codegen/schema-ast": ^4.0.0
-    "@graphql-codegen/visitor-plugin-common": 4.0.1
+    "@graphql-codegen/plugin-helpers": ^5.0.2
+    "@graphql-codegen/schema-ast": ^4.0.1
+    "@graphql-codegen/visitor-plugin-common": 4.1.0
     auto-bind: ~4.0.0
-    tslib: ~2.5.0
+    tslib: ~2.6.0
   peerDependencies:
     graphql: ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
-  checksum: f360b7204dc33b918d1ece88b65a46a4eac89e7c3f729886e954ebdc405d1279de6fc5a688580a4aba50826ca663dae03bcda2ac72189f5afbfc1a1727d188a6
+  checksum: 859c7e0e671d800ad430d07aabde64de304add5a5f3c6bb67e90d01112ca0de4819f5dac16994ca45f311a76ec2e02de70df77865391c5a50382c31d9c0af06d
   languageName: node
   linkType: hard
 
-"@graphql-codegen/visitor-plugin-common@npm:4.0.1":
-  version: 4.0.1
-  resolution: "@graphql-codegen/visitor-plugin-common@npm:4.0.1"
+"@graphql-codegen/visitor-plugin-common@npm:4.1.0, @graphql-codegen/visitor-plugin-common@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "@graphql-codegen/visitor-plugin-common@npm:4.1.0"
   dependencies:
-    "@graphql-codegen/plugin-helpers": ^5.0.0
+    "@graphql-codegen/plugin-helpers": ^5.0.2
     "@graphql-tools/optimize": ^2.0.0
     "@graphql-tools/relay-operation-optimizer": ^7.0.0
     "@graphql-tools/utils": ^10.0.0
@@ -6465,10 +6534,10 @@ __metadata:
     dependency-graph: ^0.11.0
     graphql-tag: ^2.11.0
     parse-filepath: ^1.0.2
-    tslib: ~2.5.0
+    tslib: ~2.6.0
   peerDependencies:
     graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0
-  checksum: 72fe72850bcf9907c46ee85cf80ca5f7313418953fc6bc09b761145260ceb9e79199e92c7b3467e9b6371342e70234af5e1be7ee664457a4fdec92ea3bed878a
+  checksum: cfd6cbecbb991bd28ac2bd1ef352ddfd3fbd0339631593fa25f16cf5ed8a390335c3ddd5e01b2a5978db96c26ddec91dcc9c9a7a8513b47ef8368c6c22f8de1e
   languageName: node
   linkType: hard
 
@@ -6531,6 +6600,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graphql-tools/documents@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@graphql-tools/documents@npm:1.0.0"
+  dependencies:
+    lodash.sortby: ^4.7.0
+    tslib: ^2.4.0
+  peerDependencies:
+    graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
+  checksum: e022b4438efcbeceadb0ff529d1d58fc1629bfce3325a646937813f893a9b422d3326e29fcb6549d5ff8db1e82a9a9798b354b36cd34cbf90827261f0139d8f5
+  languageName: node
+  linkType: hard
+
 "@graphql-tools/executor-graphql-ws@npm:^1.0.0":
   version: 1.1.1
   resolution: "@graphql-tools/executor-graphql-ws@npm:1.1.1"
@@ -6548,8 +6629,8 @@ __metadata:
   linkType: hard
 
 "@graphql-tools/executor-http@npm:^1.0.0, @graphql-tools/executor-http@npm:^1.0.5":
-  version: 1.0.5
-  resolution: "@graphql-tools/executor-http@npm:1.0.5"
+  version: 1.0.7
+  resolution: "@graphql-tools/executor-http@npm:1.0.7"
   dependencies:
     "@graphql-tools/utils": ^10.0.2
     "@repeaterjs/repeater": ^3.0.4
@@ -6560,7 +6641,7 @@ __metadata:
     value-or-promise: ^1.0.12
   peerDependencies:
     graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
-  checksum: 5f87daf9cc226ba86a828371af268a35f78c2b525a8d9eafab977bd9cf96ce66b453f8b59c692ce095bb49a688bd3004f73074272f40695cf9f31811179172b2
+  checksum: 02f2804f649abfc0ecbf11dad2b9fc08ef2d1aa8f1aa03099419a5439554a97fc1ca1e297118fea9c4f0ca6c54207f02b5045126bb93b43b8f52c0af0dbc19d8
   languageName: node
   linkType: hard
 
@@ -6802,8 +6883,8 @@ __metadata:
   linkType: hard
 
 "@graphql-tools/utils@npm:^10.0.0, @graphql-tools/utils@npm:^10.0.10, @graphql-tools/utils@npm:^10.0.11, @graphql-tools/utils@npm:^10.0.2, @graphql-tools/utils@npm:^10.0.5, @graphql-tools/utils@npm:^10.0.8":
-  version: 10.0.11
-  resolution: "@graphql-tools/utils@npm:10.0.11"
+  version: 10.0.12
+  resolution: "@graphql-tools/utils@npm:10.0.12"
   dependencies:
     "@graphql-typed-document-node/core": ^3.1.1
     cross-inspect: 1.0.0
@@ -6811,7 +6892,7 @@ __metadata:
     tslib: ^2.4.0
   peerDependencies:
     graphql: ^14.0.0 || ^15.0.0 || ^16.0.0 || ^17.0.0
-  checksum: cb480d0b3f253f85b84415f5b9e2893013a8e8b72501ec04e338c54a26ac234c9723c6c2d697f1316e89589425e5b133fd45eab2504a52b84d1d75dc6a495863
+  checksum: 5d228979a7252912bba130be47bf5f69275ed858ce1992acaf324ba6db3992b26f077a8a645104a81e675aff6fd85c3fc496d00b3e4c5b3ff9c7cc38da124a00
   languageName: node
   linkType: hard
 
@@ -6839,14 +6920,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@hapi/hoek@npm:^9.0.0":
+"@hapi/hoek@npm:^9.0.0, @hapi/hoek@npm:^9.3.0":
   version: 9.3.0
   resolution: "@hapi/hoek@npm:9.3.0"
   checksum: 4771c7a776242c3c022b168046af4e324d116a9d2e1d60631ee64f474c6e38d1bb07092d898bf95c7bc5d334c5582798a1456321b2e53ca817d4e7c88bc25b43
   languageName: node
   linkType: hard
 
-"@hapi/topo@npm:^5.0.0":
+"@hapi/topo@npm:^5.1.0":
   version: 5.1.0
   resolution: "@hapi/topo@npm:5.1.0"
   dependencies:
@@ -6856,14 +6937,15 @@ __metadata:
   linkType: hard
 
 "@headlessui/react@npm:^1.5.0":
-  version: 1.7.17
-  resolution: "@headlessui/react@npm:1.7.17"
+  version: 1.7.18
+  resolution: "@headlessui/react@npm:1.7.18"
   dependencies:
+    "@tanstack/react-virtual": ^3.0.0-beta.60
     client-only: ^0.0.1
   peerDependencies:
     react: ^16 || ^17 || ^18
     react-dom: ^16 || ^17 || ^18
-  checksum: 0cdb67747e7f606f78214dac0b48573247779e70534b4471515c094b74addda173dc6a9847d33aea9c6e6bc151016c034125328953077e32aa7947ebabed91f7
+  checksum: 7463167b4cf2ad57f92c2deedd6429a245dfc4d979ead5533d2e83429e3e4dd39c346e5a8fd958e6bd9e2fba42486af97577b7dd3137f5a797dacc93632578ba
   languageName: node
   linkType: hard
 
@@ -8426,7 +8508,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@peculiar/asn1-schema@npm:^2.3.6":
+"@peculiar/asn1-schema@npm:^2.3.6, @peculiar/asn1-schema@npm:^2.3.8":
   version: 2.3.8
   resolution: "@peculiar/asn1-schema@npm:2.3.8"
   dependencies:
@@ -8447,15 +8529,15 @@ __metadata:
   linkType: hard
 
 "@peculiar/webcrypto@npm:^1.4.0":
-  version: 1.4.3
-  resolution: "@peculiar/webcrypto@npm:1.4.3"
+  version: 1.4.4
+  resolution: "@peculiar/webcrypto@npm:1.4.4"
   dependencies:
-    "@peculiar/asn1-schema": ^2.3.6
+    "@peculiar/asn1-schema": ^2.3.8
     "@peculiar/json-schema": ^1.1.12
-    pvtsutils: ^1.3.2
-    tslib: ^2.5.0
+    pvtsutils: ^1.3.5
+    tslib: ^2.6.2
     webcrypto-core: ^1.7.7
-  checksum: 5604c02b7e9a8cef61bb4430e733e939c7737533ba65ba5fac4beb3a6d613add478ab45455cb57506789b6d00704d83e4965a0f712de3e8f40706e0961670e5c
+  checksum: ab5963c6a0e8010cc6499fe4b509713208e147b36a80d50d263ca3309a8b7e152ff2951c20bf9357bfe7626622c15199e05abe9cf3d7db293733e8f697c9d115
   languageName: node
   linkType: hard
 
@@ -8589,10 +8671,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@prisma/debug@npm:5.7.1":
-  version: 5.7.1
-  resolution: "@prisma/debug@npm:5.7.1"
-  checksum: 7c3134416836ff8a2d1172a71a1d063d7520cbed445d967f495cdb62295730ec8e779157b744e1afac423b6cf36cba11a643c32b85a975119c78e52f977a80db
+"@prisma/debug@npm:5.8.1":
+  version: 5.8.1
+  resolution: "@prisma/debug@npm:5.8.1"
+  checksum: 23c85cbd72950161c4000e81dbf3c1e4a81dd8c5863fc76a1428724fad2b90bb0a869ff13feb2f3ff4a3551d1fd9f03b952b0748a2e16dfcf9dbdba1720511f9
   languageName: node
   linkType: hard
 
@@ -8664,11 +8746,11 @@ __metadata:
   linkType: hard
 
 "@prisma/generator-helper@npm:^5.0.0":
-  version: 5.7.1
-  resolution: "@prisma/generator-helper@npm:5.7.1"
+  version: 5.8.1
+  resolution: "@prisma/generator-helper@npm:5.8.1"
   dependencies:
-    "@prisma/debug": 5.7.1
-  checksum: fab19ae14a4efadf5ef5b277a84f0a386401f1f387841919d4521b4735c47eb01a07a59f5760dd99d376edf5744a4eeb641de97d1073a75c02d99bd3f6d44553
+    "@prisma/debug": 5.8.1
+  checksum: 320cea2b71923cf2304b2af99e5c828ff72c89dc5ad7bf8246ea427c990a553f829ee1548132b06a2f209654207ed1742e7d2b44952019459ab0fa84c217f35c
   languageName: node
   linkType: hard
 
@@ -10891,7 +10973,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sideway/address@npm:^4.1.3":
+"@sideway/address@npm:^4.1.4":
   version: 4.1.4
   resolution: "@sideway/address@npm:4.1.4"
   dependencies:
@@ -12080,18 +12162,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/query-core@npm:4.3.8":
-  version: 4.3.8
-  resolution: "@tanstack/query-core@npm:4.3.8"
-  checksum: 25ea16db7632f5acc7c80e60b9f1410cf9df430240ec5077a1607c3ffea14db2c78db800f7bc70efafd7ce26f7216cda767824fa279049cc9c7e40ac1818f38e
+"@tanstack/query-core@npm:4.36.1":
+  version: 4.36.1
+  resolution: "@tanstack/query-core@npm:4.36.1"
+  checksum: 47672094da20d89402d9fe03bb7b0462be73a76ff9ca715169738bc600a719d064d106d083a8eedae22a2c22de22f87d5eb5d31ef447aba771d9190f2117ed10
+  languageName: node
+  linkType: hard
+
+"@tanstack/query-core@npm:5.17.19":
+  version: 5.17.19
+  resolution: "@tanstack/query-core@npm:5.17.19"
+  checksum: ad09f1d64a169f8427225020b8b68328d64d1e671af28d47c33df31302106a05af4ed61587642704f70e1fe3861a8f00ea1722685a128dc6ee60fdf34b8dcc57
   languageName: node
   linkType: hard
 
 "@tanstack/react-query@npm:^4.3.9":
-  version: 4.3.9
-  resolution: "@tanstack/react-query@npm:4.3.9"
+  version: 4.36.1
+  resolution: "@tanstack/react-query@npm:4.36.1"
   dependencies:
-    "@tanstack/query-core": 4.3.8
+    "@tanstack/query-core": 4.36.1
     use-sync-external-store: ^1.2.0
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -12102,7 +12191,18 @@ __metadata:
       optional: true
     react-native:
       optional: true
-  checksum: 1f77aadda55722519458185b4db5378d05d95bcbe9f7c4fda0ef82121a975223ede1a56729db6030984b336e533c04b1c7aa8fed344e5c52ec73a0486b65f8e7
+  checksum: 1aff0a476859386f8d32253fa0d0bde7b81769a6d4d4d9cbd78778f0f955459a3bdb7ee27a0d2ee7373090f12998b45df80db0b5b313bd0a7a39d36c6e8e51c5
+  languageName: node
+  linkType: hard
+
+"@tanstack/react-query@npm:^5.17.15":
+  version: 5.17.19
+  resolution: "@tanstack/react-query@npm:5.17.19"
+  dependencies:
+    "@tanstack/query-core": 5.17.19
+  peerDependencies:
+    react: ^18.0.0
+  checksum: ceb98f42cb45c4e2086dbcf608c9488adc26dceebbf933c6ab59b896c3c8ae658622b213495140a19ac038458dbf3a484f033ffab9e1dcde7a77341d1b02bf23
   languageName: node
   linkType: hard
 
@@ -12118,6 +12218,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/react-virtual@npm:^3.0.0-beta.60":
+  version: 3.0.2
+  resolution: "@tanstack/react-virtual@npm:3.0.2"
+  dependencies:
+    "@tanstack/virtual-core": 3.0.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: d8a370150582cf765a3e74e506cd1d95b65449a9b30c992865743d091b3953c03a6832f732439beef0a9c4f42bc211ea42a08d6b488122b32afd76b1cd7569bf
+  languageName: node
+  linkType: hard
+
 "@tanstack/table-core@npm:8.9.3":
   version: 8.9.3
   resolution: "@tanstack/table-core@npm:8.9.3"
@@ -12125,6 +12237,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tanstack/virtual-core@npm:3.0.0":
+  version: 3.0.0
+  resolution: "@tanstack/virtual-core@npm:3.0.0"
+  checksum: 7283d50fc7b7a56608c37a8e94a93b85890ff7e39c6281633a19c4d6f6f4fbf25f8418f1eec302a008a8746a0d1d0cd00630137b55e6cf019818d68af8ed16b6
+  languageName: node
+  linkType: hard
+
 "@tediousjs/connection-string@npm:^0.4.1":
   version: 0.4.1
   resolution: "@tediousjs/connection-string@npm:0.4.1"
@@ -12284,65 +12403,68 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@trpc/client@npm:11.0.0-next-beta.222":
+  version: 11.0.0-next-beta.222
+  resolution: "@trpc/client@npm:11.0.0-next-beta.222"
+  peerDependencies:
+    "@trpc/server": 11.0.0-next-beta.222+3c3fb2a38
+  checksum: 984fbe81ffcf47e81296e332f300c4909b8c5d65f0da62a481e07f7a3b1b3fcdab454bdff5cc2a8fc8aaecd1ca0e18cfa3fe0fdf2e4d972305938ed0292ac2f3
+  languageName: node
+  linkType: hard
+
 "@trpc/client@npm:^10.0.0":
-  version: 10.44.1
-  resolution: "@trpc/client@npm:10.44.1"
+  version: 10.45.0
+  resolution: "@trpc/client@npm:10.45.0"
   peerDependencies:
-    "@trpc/server": 10.44.1
-  checksum: c3277e9f6e1ff650e9da82b4f6ec1718bca86ad1d17f083a200e29ad635da7d988c9223c0ccd0c575ed1ab3cb59b47e1d83c659e3ae8f6537d3c54ea34010f2a
+    "@trpc/server": 10.45.0
+  checksum: 7eb48d4f3fd5404180c046052c2771d222a50ed9cc2a37be40948d9d48108c11ee5cba3819d719a44e4e461b0ff6d37a7442e7301d2d4c125414e89e1e521e5f
   languageName: node
   linkType: hard
 
-"@trpc/client@npm:^10.13.0":
-  version: 10.13.0
-  resolution: "@trpc/client@npm:10.13.0"
+"@trpc/next@npm:11.0.0-next-beta.222":
+  version: 11.0.0-next-beta.222
+  resolution: "@trpc/next@npm:11.0.0-next-beta.222"
   peerDependencies:
-    "@trpc/server": 10.13.0
-  checksum: d41ea0988167e477d945232936f7bb8a065ed86c5ba4e987eeebe69c0889f35dbbc3542b3a0dbd8afd8b664376aa5e686a575afa546de05fb486df17b62df049
-  languageName: node
-  linkType: hard
-
-"@trpc/next@npm:^10.13.0":
-  version: 10.13.0
-  resolution: "@trpc/next@npm:10.13.0"
-  dependencies:
-    react-ssr-prepass: ^1.5.0
-  peerDependencies:
-    "@tanstack/react-query": ^4.3.8
-    "@trpc/client": 10.13.0
-    "@trpc/react-query": ^10.8.0
-    "@trpc/server": 10.13.0
-    next: 13.2.1
+    "@tanstack/react-query": ^5.0.0
+    "@trpc/client": 11.0.0-next-beta.222+3c3fb2a38
+    "@trpc/react-query": 11.0.0-next-beta.222+3c3fb2a38
+    "@trpc/server": 11.0.0-next-beta.222+3c3fb2a38
+    next: "*"
     react: ">=16.8.0"
     react-dom: ">=16.8.0"
-  checksum: 128ffb709011cb52378885244e4fcfd5c658c8b01f681d2e7e9b648c583e3146991ba978adf6d4cc2a5f09177562faec4c85e66188821b3f2c093c53a9b403b9
+  peerDependenciesMeta:
+    "@tanstack/react-query":
+      optional: true
+    "@trpc/react-query":
+      optional: true
+  checksum: 7fcf9cb9eddc0912845f6626e95e2d5dde42cc18124b117c8c850f38af2703e80f6586368fdc1f41655275ce4e9d13bd0a132f73838aa43732c8c9ab87b662e5
   languageName: node
   linkType: hard
 
-"@trpc/react-query@npm:^10.13.0":
-  version: 10.13.0
-  resolution: "@trpc/react-query@npm:10.13.0"
+"@trpc/react-query@npm:11.0.0-next-beta.222":
+  version: 11.0.0-next-beta.222
+  resolution: "@trpc/react-query@npm:11.0.0-next-beta.222"
   peerDependencies:
-    "@tanstack/react-query": ^4.3.8
-    "@trpc/client": 10.13.0
-    "@trpc/server": 10.13.0
-    react: ">=16.8.0"
-    react-dom: ">=16.8.0"
-  checksum: 1db746919992bdcf2a46f7c1e3872907c580aa6b0dbc4d8a67ae82530bf996223aed484a5547e38c1518ee75ad377674f45b6a25480a7e1c8574cae3f07274f6
+    "@tanstack/react-query": ^5.0.0
+    "@trpc/client": 11.0.0-next-beta.222+3c3fb2a38
+    "@trpc/server": 11.0.0-next-beta.222+3c3fb2a38
+    react: ">=18.2.0"
+    react-dom: ">=18.2.0"
+  checksum: c9b0175159d85378f412b5c270c93fd342846a93543f16e3c02865c69fa41ab67c4831900be63dbfce0b7ce49681f9e4efa4c93b216abfff7e694207af92f0fb
+  languageName: node
+  linkType: hard
+
+"@trpc/server@npm:11.0.0-next-beta.222":
+  version: 11.0.0-next-beta.222
+  resolution: "@trpc/server@npm:11.0.0-next-beta.222"
+  checksum: bf157b6ed6da0d4080cdfb089963e1da4527df87c2f19e159b74f4bf339e3c443061c800e39ec42bf79ccaf7800127d4426274492daf5059763ca248dd7df9fc
   languageName: node
   linkType: hard
 
 "@trpc/server@npm:^10.0.0":
-  version: 10.44.1
-  resolution: "@trpc/server@npm:10.44.1"
-  checksum: e52675281f62829a976d3568b0409ed035914fcef9320a2f8b4eff0b8eaaffa55c7ecfdf2f9e55f90cab9630fc92b8426c4e55616b7bd88c7ea4e72e0b37dcc9
-  languageName: node
-  linkType: hard
-
-"@trpc/server@npm:^10.13.0":
-  version: 10.13.0
-  resolution: "@trpc/server@npm:10.13.0"
-  checksum: 952f6d1017be935bb65f85a34330be721193a5e8bd28a95d27951a74b2979d9e471f1e7d98a813f37ba8f7d7e672de9078f7d6060211bbc89e4cf6fcf5531d70
+  version: 10.45.0
+  resolution: "@trpc/server@npm:10.45.0"
+  checksum: 48a1c8337853639919d2696321cf87d76eaa6273fc7987022b9f12ced3c688af81a2a065f2dbf93f9e51ac593be8858cc165fa147a3a556956b419d0284e043a
   languageName: node
   linkType: hard
 
@@ -14184,12 +14306,12 @@ __metadata:
   linkType: hard
 
 "@whatwg-node/fetch@npm:^0.9.0":
-  version: 0.9.14
-  resolution: "@whatwg-node/fetch@npm:0.9.14"
+  version: 0.9.15
+  resolution: "@whatwg-node/fetch@npm:0.9.15"
   dependencies:
     "@whatwg-node/node-fetch": ^0.5.0
     urlpattern-polyfill: ^9.0.0
-  checksum: 9dc7c49742df03f8072e8caa1c2f602f9487ee5fd42c8daa23da24efe73c538f452f15852a6ce4aa12a933b70ce4c8b1fbd036a065b7e18ffbffa9b29f403746
+  checksum: 44a844852f164728f7b9348a065dc5475ae8271020990da0a1c7ed2ba74506c1ef0bc2bfb6422460da3a0fcdd34bf38fb15207b4509728f9561b5f61b2ecbd2d
   languageName: node
   linkType: hard
 
@@ -14207,15 +14329,15 @@ __metadata:
   linkType: hard
 
 "@whatwg-node/node-fetch@npm:^0.5.0":
-  version: 0.5.3
-  resolution: "@whatwg-node/node-fetch@npm:0.5.3"
+  version: 0.5.4
+  resolution: "@whatwg-node/node-fetch@npm:0.5.4"
   dependencies:
     "@kamilkisiela/fast-url-parser": ^1.1.4
     "@whatwg-node/events": ^0.1.0
     busboy: ^1.6.0
     fast-querystring: ^1.1.1
     tslib: ^2.3.1
-  checksum: 43e87406d80c8e5df86080fca03da5129c77567cae20f6c8a733b7c5c95175d2ec038496d0ba142cc1ca22d77e0a9bc0dbce9e290390eb8061946f1b4ca8310d
+  checksum: 7716b06e1d17857be79f05d8a001d10532372963a6b75859be0659b90982e793a7372abb1aab6bc5fb824e4d9112b63781e4a0cb5d7de1b7c3e380dc96f47f59
   languageName: node
   linkType: hard
 
@@ -15353,13 +15475,13 @@ __metadata:
   linkType: hard
 
 "axios@npm:^1.6.1":
-  version: 1.6.2
-  resolution: "axios@npm:1.6.2"
+  version: 1.6.5
+  resolution: "axios@npm:1.6.5"
   dependencies:
-    follow-redirects: ^1.15.0
+    follow-redirects: ^1.15.4
     form-data: ^4.0.0
     proxy-from-env: ^1.1.0
-  checksum: 4a7429e2b784be0f2902ca2680964391eae7236faa3967715f30ea45464b98ae3f1c6f631303b13dfe721b17126b01f486c7644b9ef276bfc63112db9fd379f8
+  checksum: e28d67b2d9134cb4608c44d8068b0678cfdccc652742e619006f27264a30c7aba13b2cd19c6f1f52ae195b5232734925928fb192d5c85feea7edd2f273df206d
   languageName: node
   linkType: hard
 
@@ -18169,31 +18291,31 @@ __metadata:
   languageName: node
   linkType: hard
 
-"datocms-structured-text-generic-html-renderer@npm:^2.0.1, datocms-structured-text-generic-html-renderer@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "datocms-structured-text-generic-html-renderer@npm:2.0.4"
+"datocms-structured-text-generic-html-renderer@npm:^2.0.1, datocms-structured-text-generic-html-renderer@npm:^2.1.12":
+  version: 2.1.12
+  resolution: "datocms-structured-text-generic-html-renderer@npm:2.1.12"
   dependencies:
-    datocms-structured-text-utils: ^2.0.4
-  checksum: 58831e7bbcf8b8a18eb79af482898ba59b22ca18a52fafd9e855dce91933c26d0ae5ba53f002b1f34f4ebc106eb679232f3d00c560a4921b648a1787546f32b2
+    datocms-structured-text-utils: ^2.1.12
+  checksum: ef9e29b15903ce69be42faa4f4a4364bb7ba0c6565008cb2f557e8865c0806edb938a27f9bee7aa682f7af84fe89489b688b9713ea48501c139d204fea1f18c0
   languageName: node
   linkType: hard
 
 "datocms-structured-text-to-plain-text@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "datocms-structured-text-to-plain-text@npm:2.0.4"
+  version: 2.1.12
+  resolution: "datocms-structured-text-to-plain-text@npm:2.1.12"
   dependencies:
-    datocms-structured-text-generic-html-renderer: ^2.0.4
-    datocms-structured-text-utils: ^2.0.4
-  checksum: 24b36817849e6f8959bcdb3082f25487584d0f376765c0f1f94f3b549c10502220ea1c4936e6b323cc68d84da75488ce94d68528d9acecb835f3e5bcfb76a84a
+    datocms-structured-text-generic-html-renderer: ^2.1.12
+    datocms-structured-text-utils: ^2.1.12
+  checksum: 8d436ca14379650d66257b5a2f36523e1ebaee41584caf021c863155404a292dbde7408c6cb0e0185638c2eb7508087239f862e78e8647b806ececd4e24683fd
   languageName: node
   linkType: hard
 
-"datocms-structured-text-utils@npm:^2.0.1, datocms-structured-text-utils@npm:^2.0.4":
-  version: 2.0.4
-  resolution: "datocms-structured-text-utils@npm:2.0.4"
+"datocms-structured-text-utils@npm:^2.0.1, datocms-structured-text-utils@npm:^2.0.4, datocms-structured-text-utils@npm:^2.1.12":
+  version: 2.1.12
+  resolution: "datocms-structured-text-utils@npm:2.1.12"
   dependencies:
     array-flatten: ^3.0.0
-  checksum: 9e10d4faae0c47eebeee028cb0e8c459ecea6fb3dc4950ed0ab310d9b7f18d8ee014071142a42098b20c77264b60a2dd928e9a6462ae4ffea50a70d867f82f34
+  checksum: 68d5be9cb711fb630866cca2c0e44b333b390d9672b2ea680d5870c26e8ccadcc6bd77d02a95ccbb913c160466a3046cbd934c41712f9d064f98a73009e0b97a
   languageName: node
   linkType: hard
 
@@ -21033,6 +21155,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"follow-redirects@npm:^1.15.4":
+  version: 1.15.5
+  resolution: "follow-redirects@npm:1.15.5"
+  peerDependenciesMeta:
+    debug:
+      optional: true
+  checksum: 5ca49b5ce6f44338cbfc3546823357e7a70813cecc9b7b768158a1d32c1e62e7407c944402a918ea8c38ae2e78266312d617dc68783fac502cbb55e1047b34ec
+  languageName: node
+  linkType: hard
+
 "for-each@npm:^0.3.3":
   version: 0.3.3
   resolution: "for-each@npm:0.3.3"
@@ -22190,9 +22322,9 @@ __metadata:
   linkType: hard
 
 "gsap@npm:^3.11.0":
-  version: 3.12.4
-  resolution: "gsap@npm:3.12.4"
-  checksum: 7b78fb46b3250c09a1856da32109bae16091be41bd3ec3a17ce2b6dea444fbecd2c57b9c677a09c6b4c022d3024e9ae39d377fab5f63302417a88a6b43231381
+  version: 3.12.5
+  resolution: "gsap@npm:3.12.5"
+  checksum: 60b99dc4482992ba86013963ee9a97a5ec62d480495dd85764788913245aa08cfd202c1df4bbc7592e43d5faa885127bec75f77266f2964fe3d3b559ab63f852
   languageName: node
   linkType: hard
 
@@ -24516,15 +24648,15 @@ __metadata:
   linkType: hard
 
 "joi@npm:^17.11.0":
-  version: 17.11.0
-  resolution: "joi@npm:17.11.0"
+  version: 17.12.0
+  resolution: "joi@npm:17.12.0"
   dependencies:
-    "@hapi/hoek": ^9.0.0
-    "@hapi/topo": ^5.0.0
-    "@sideway/address": ^4.1.3
+    "@hapi/hoek": ^9.3.0
+    "@hapi/topo": ^5.1.0
+    "@sideway/address": ^4.1.4
     "@sideway/formula": ^3.0.1
     "@sideway/pinpoint": ^2.0.0
-  checksum: 3a4e9ecba345cdafe585e7ed8270a44b39718e11dff3749aa27e0001a63d578b75100c062be28e6f48f960b594864034e7a13833f33fbd7ad56d5ce6b617f9bf
+  checksum: bef47c8962d5a2ea40d50f9d2bbbd8a9aa85f5b454a2ddc4da664ea17e3ddb3dae9f93926b96fecd20831a6e2f3271a38c6dda37e1eaed7b19988bcbe11df3d7
   languageName: node
   linkType: hard
 
@@ -24557,9 +24689,9 @@ __metadata:
   linkType: hard
 
 "jose@npm:^5.0.0":
-  version: 5.1.3
-  resolution: "jose@npm:5.1.3"
-  checksum: c0225c3408b1c3fcfc40c68161e5e14d554c606ffa428250e0db618469df52f4ce32c69918e296c8c299db1081981638096be838426f61d926269d35602fd814
+  version: 5.2.0
+  resolution: "jose@npm:5.2.0"
+  checksum: 277ef57dcfb2552c3f769e07235ace4d206b8959ca72dff58128be9af480ab591c8cd8724140d0110fd3bc88a020178d552ab29d418a97f98724d5c82593ac93
   languageName: node
   linkType: hard
 
@@ -24854,14 +24986,14 @@ __metadata:
   linkType: hard
 
 "json-stable-stringify@npm:^1.0.1":
-  version: 1.1.0
-  resolution: "json-stable-stringify@npm:1.1.0"
+  version: 1.1.1
+  resolution: "json-stable-stringify@npm:1.1.1"
   dependencies:
     call-bind: ^1.0.5
     isarray: ^2.0.5
     jsonify: ^0.0.1
     object-keys: ^1.1.1
-  checksum: 98e74dd45d3e93aa7cb5351b9f55475e15a8a7b57f401897373a1a1bbe41a6757f8b8d24f2bff0594893eccde616efe71bbaea2c1fdc1f67e8c39bcb9ee993e2
+  checksum: e1ba06600fd278767eeff53f28e408e29c867e79abf564e7aadc3ce8f31f667258f8db278ef28831e45884dd687388fa1910f46e599fc19fb94c9afbbe3a4de8
   languageName: node
   linkType: hard
 
@@ -26081,6 +26213,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lodash.sortby@npm:^4.7.0":
+  version: 4.7.0
+  resolution: "lodash.sortby@npm:4.7.0"
+  checksum: db170c9396d29d11fe9a9f25668c4993e0c1331bcb941ddbd48fb76f492e732add7f2a47cfdf8e9d740fa59ac41bbfaf931d268bc72aab3ab49e9f89354d718c
+  languageName: node
+  linkType: hard
+
 "lodash.startcase@npm:^4.4.0":
   version: 4.4.0
   resolution: "lodash.startcase@npm:4.4.0"
@@ -30255,11 +30394,11 @@ __metadata:
   linkType: hard
 
 "playwright-core@npm:^1.38.1":
-  version: 1.40.1
-  resolution: "playwright-core@npm:1.40.1"
+  version: 1.41.1
+  resolution: "playwright-core@npm:1.41.1"
   bin:
     playwright-core: cli.js
-  checksum: 84d92fb9b86e3c225b16b6886bf858eb5059b4e60fa1205ff23336e56a06dcb2eac62650992dede72f406c8e70a7b6a5303e511f9b4bc0b85022ede356a01ee0
+  checksum: c83446a560c6bd85f6f0cd586ff8c643b77e2005567386e12f85890936cc370673114b94cd883246018797cc1580e93b0296ade7d07275bb611b8962f5bb9693
   languageName: node
   linkType: hard
 
@@ -30789,8 +30928,8 @@ __metadata:
   linkType: hard
 
 "prisma-field-encryption@npm:^1.4.0":
-  version: 1.5.0
-  resolution: "prisma-field-encryption@npm:1.5.0"
+  version: 1.5.1
+  resolution: "prisma-field-encryption@npm:1.5.1"
   dependencies:
     "@47ng/cloak": ^1.1.0
     "@prisma/generator-helper": ^5.0.0
@@ -30802,7 +30941,7 @@ __metadata:
     "@prisma/client": ">= 4.7"
   bin:
     prisma-field-encryption: dist/generator/main.js
-  checksum: 530bd970c5015c8c587bdca24136262d746093dd3d0793c892f4a1c377633182ae95e0ef5659465f914e4cc9bd7b24bf45551aa9c624a05942570f5b650fc065
+  checksum: 9c6175d70e0ba41b958c8bb0bf716ab53601b7bde26554df45b12999c29fe1ef121dfa7c3e4125d58542b0c3f6841a6326aae80714896e458c419896b21442ee
   languageName: node
   linkType: hard
 
@@ -31590,12 +31729,12 @@ __metadata:
   linkType: hard
 
 "react-fast-marquee@npm:^1.3.5":
-  version: 1.6.2
-  resolution: "react-fast-marquee@npm:1.6.2"
+  version: 1.6.3
+  resolution: "react-fast-marquee@npm:1.6.3"
   peerDependencies:
     react: ">= 16.8.0 || 18.0.0"
     react-dom: ">= 16.8.0 || 18.0.0"
-  checksum: 5bdd2115f042a734c97317f45237450116665db999ed6fc63326c6b9f34dd93a06ea601c7a9a8157960b5da22fcd3516e75fe28ecb296631b24de94f22ad1efc
+  checksum: 7dc54eb0ab073796bb33fb62e89db3db3f487b68142cebe7be656b54696db67b6b684b4339ed07cfc2d22b62a7b79cf4406148e5f21dbf580897898bfe138801
   languageName: node
   linkType: hard
 
@@ -32025,14 +32164,14 @@ __metadata:
   linkType: hard
 
 "react-resize-detector@npm:^9.1.0":
-  version: 9.1.0
-  resolution: "react-resize-detector@npm:9.1.0"
+  version: 9.1.1
+  resolution: "react-resize-detector@npm:9.1.1"
   dependencies:
     lodash: ^4.17.21
   peerDependencies:
     react: ^16.0.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 05b263e141fd428eea433e399f88c3e1a379b4a2293958f59b5a5c75dd86c621ce60583724257cc3dc1f5c120a664666ff3fa53d41e6c283687676dc55afa02b
+  checksum: 0612b4416212962e5762f25e20c7016bdce3107d745a399b44bc099a04488a704228908357845c2e3fa49bf9902077f0eeebc99cf76d42ea479a8aa79f4c5b9d
   languageName: node
   linkType: hard
 
@@ -32081,15 +32220,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-ssr-prepass@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "react-ssr-prepass@npm:1.5.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: efe89b9f8b2053474613f56dfdbeb41d8ee2e572bf819a39377d95d3e4a9acf8a4a16e28d8d8034cb9ac2b316d11dc9e62217743e4322046d08175eb3b4fed3e
-  languageName: node
-  linkType: hard
-
 "react-sticky-box@npm:^2.0.4":
   version: 2.0.4
   resolution: "react-sticky-box@npm:2.0.4"
@@ -32801,9 +32931,9 @@ __metadata:
   linkType: hard
 
 "remeda@npm:^1.24.1":
-  version: 1.33.0
-  resolution: "remeda@npm:1.33.0"
-  checksum: 3d07b191e10b67bb9a008646b98031c12bd20caba25f280a7f491de4c9db7e10150f1243f831669586bb65c3829dfe3319e08c1a5a90414b3fd040c83f2034bf
+  version: 1.38.0
+  resolution: "remeda@npm:1.38.0"
+  checksum: 3777b281857330b68bb09e6cdd8f68fd264e2f78e9142a0347866ab3a07591c66be1d7b3f30083fd62b7e3b62a9112eeaf23ecc9e8aa097061e612b5c89e0b84
   languageName: node
   linkType: hard
 
@@ -36116,7 +36246,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:^2, tslib@npm:^2.4.1, tslib@npm:^2.6.1, tslib@npm:^2.6.2":
+"tslib@npm:^2, tslib@npm:^2.4.1, tslib@npm:^2.6.1, tslib@npm:^2.6.2, tslib@npm:~2.6.0":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: 329ea56123005922f39642318e3d1f0f8265d1e7fcb92c633e0809521da75eeaca28d2cf96d7248229deb40e5c19adf408259f4b9640afd20d13aecc1430f3ad
@@ -36144,13 +36274,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:~2.5.0":
-  version: 2.5.3
-  resolution: "tslib@npm:2.5.3"
-  checksum: 88902b309afaf83259131c1e13da1dceb0ad1682a213143a1346a649143924d78cf3760c448b84d796938fd76127183894f8d85cbb3bf9c4fddbfcc140c0003c
-  languageName: node
-  linkType: hard
-
 "tslog@npm:^4.9.2":
   version: 4.9.2
   resolution: "tslog@npm:4.9.2"
@@ -37723,9 +37846,9 @@ __metadata:
   linkType: hard
 
 "web-streams-polyfill@npm:^3.2.0, web-streams-polyfill@npm:^3.2.1":
-  version: 3.2.1
-  resolution: "web-streams-polyfill@npm:3.2.1"
-  checksum: b119c78574b6d65935e35098c2afdcd752b84268e18746606af149e3c424e15621b6f1ff0b42b2676dc012fc4f0d313f964b41a4b5031e525faa03997457da02
+  version: 3.3.2
+  resolution: "web-streams-polyfill@npm:3.3.2"
+  checksum: 0292f4113c1bda40d8e8ecebee39eb14cc2e2e560a65a6867980e394537a2645130e2c73f5ef6e641fd3697d2f71720ccf659aebaf69a9d5a773f653a0fdf39d
   languageName: node
   linkType: hard
 
@@ -38156,8 +38279,8 @@ __metadata:
   linkType: hard
 
 "ws@npm:^8.12.0, ws@npm:^8.15.0":
-  version: 8.15.1
-  resolution: "ws@npm:8.15.1"
+  version: 8.16.0
+  resolution: "ws@npm:8.16.0"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ">=5.0.2"
@@ -38166,7 +38289,7 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: 8c67365f6e6134278ad635d558bfce466d7ef7543a043baea333aaa430429f0af8a130c0c36e7dd78f918d68167a659ba9b5067330b77c4b279e91533395952b
+  checksum: feb3eecd2bae82fa8a8beef800290ce437d8b8063bdc69712725f21aef77c49cb2ff45c6e5e7fce622248f9c7abaee506bae0a9064067ffd6935460c7357321b
   languageName: node
   linkType: hard