From 3084013269e30300fb0138d4a43787fd0f912666 Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 16 Apr 2024 11:37:03 +0100
Subject: [PATCH] fix: always load via SSR (#14476)

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>
---
 apps/web/pages/availability/troubleshoot.tsx  | 22 ++++++++++++++++---
 .../components/CalendarToggleContainer.tsx    |  4 ++--
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/apps/web/pages/availability/troubleshoot.tsx b/apps/web/pages/availability/troubleshoot.tsx
index e37b598d68..9a0817755a 100644
--- a/apps/web/pages/availability/troubleshoot.tsx
+++ b/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>
     </>
   );
 }
diff --git a/packages/features/troubleshooter/components/CalendarToggleContainer.tsx b/packages/features/troubleshooter/components/CalendarToggleContainer.tsx
index ad706a8ce2..ea24a81f33 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, 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);