fix: always load via SSR (#14476)

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>

apps/web/pages/availability/troubleshoot.tsx

@@ -1,16 +1,32 @@
-import { Troubleshooter } from "@calcom/features/troubleshooter/Troubleshooter";
+import dynamic from "next/dynamic";
+import { Suspense } from "react";
+
 import { getLayout } from "@calcom/features/troubleshooter/layout";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { HeadSeo } from "@calcom/ui";
+import { HeadSeo, Loader } from "@calcom/ui";
 
 import PageWrapper from "@components/PageWrapper";
 
+const TroubleshooterClientOnly = dynamic(
+  () => import("@calcom/features/troubleshooter/Troubleshooter").then((mod) => mod.Troubleshooter),
+  {
+    ssr: false,
+  }
+);
+
 function TroubleshooterPage() {
   const { t } = useLocale();
   return (
     <>
       <HeadSeo title={t("troubleshoot")} description={t("troubleshoot_availability")} />
-      <Troubleshooter month={null} />
+      <Suspense
+        fallback={
+          <div className="flex h-full w-full items-center justify-center">
+            <Loader />
+          </div>
+        }>
+        <TroubleshooterClientOnly month={null} />
+      </Suspense>
     </>
   );
 }

packages/features/troubleshooter/components/CalendarToggleContainer.tsx

@@ -79,14 +79,14 @@ function EmptyCalendarToggleItem() {
 
 export function CalendarToggleContainer() {
   const { t } = useLocale();
-  const { data, isPending } = trpc.viewer.connectedCalendars.useQuery();
+  const { data, isLoading } = 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 && !isPending ? (
+      {hasConnectedCalendars && !isLoading ? (
         <>
           {data.connectedCalendars.map((calendar) => {
             const foundPrimary = calendar.calendars?.find((item) => item.primary);