Wrap useSuspense with NoSSR (#8079)

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;

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 />}>
+      <NoSSR>
-        <FlagAdminList />
+        <Suspense fallback={<FiLoader />}>
-      </Suspense>
+          <FlagAdminList />
+        </Suspense>
+      </NoSSR>
     </>
   );
 };

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