From 98cf29f655058152ebc222ccaebf0dd7ae43887f Mon Sep 17 00:00:00 2001
From: Alex van Andel <me@alexvanandel.com>
Date: Tue, 11 Apr 2023 18:19:27 +0200
Subject: [PATCH] Wrap useSuspense with NoSSR (#8079)

---
 packages/core/components/NoSSR.tsx            | 20 +++++++++++++++++++
 .../flags/pages/flag-listing-view.tsx         |  9 ++++++---
 packages/trpc/react/trpc.ts                   |  2 +-
 3 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 packages/core/components/NoSSR.tsx

diff --git a/packages/core/components/NoSSR.tsx b/packages/core/components/NoSSR.tsx
new file mode 100644
index 0000000000..1163e0483c
--- /dev/null
+++ b/packages/core/components/NoSSR.tsx
@@ -0,0 +1,20 @@
+import { useState, useEffect } from "react";
+
+interface Props {
+  children: React.ReactNode; // React.ReactNode
+  fallback?: JSX.Element | null; // JSX.Element
+}
+
+const NoSSR = ({ children, fallback = null }: Props) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return fallback;
+  }
+
+  return <>{children}</>;
+};
+
+export default NoSSR;
diff --git a/packages/features/flags/pages/flag-listing-view.tsx b/packages/features/flags/pages/flag-listing-view.tsx
index 4b633299ed..a649d0bf5d 100644
--- a/packages/features/flags/pages/flag-listing-view.tsx
+++ b/packages/features/flags/pages/flag-listing-view.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 
+import NoSSR from "@calcom/core/components/NoSSR";
 import { Meta } from "@calcom/ui";
 import { FiLoader } from "@calcom/ui/components/icon";
 
@@ -9,9 +10,11 @@ export const FlagListingView = () => {
   return (
     <>
       <Meta title="Feature Flags" description="Here you can toggle your Cal.com instance features." />
-      <Suspense fallback={<FiLoader />}>
-        <FlagAdminList />
-      </Suspense>
+      <NoSSR>
+        <Suspense fallback={<FiLoader />}>
+          <FlagAdminList />
+        </Suspense>
+      </NoSSR>
     </>
   );
 };
diff --git a/packages/trpc/react/trpc.ts b/packages/trpc/react/trpc.ts
index 5c5c1d3e11..065aa7d8aa 100644
--- a/packages/trpc/react/trpc.ts
+++ b/packages/trpc/react/trpc.ts
@@ -23,7 +23,7 @@ export const trpc = createTRPCNext<AppRouter, NextPageContext, "ExperimentalSusp
         ? "/api/trpc"
         : process.env.VERCEL_URL
         ? `https://${process.env.VERCEL_URL}/api/trpc`
-        : `http://${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/trpc`;
+        : `${process.env.NEXT_PUBLIC_WEBAPP_URL}/api/trpc`;
 
     /**
      * If you want to use SSR, you need to use the server's full URL