Wrap sidebar in a suspense so useSearchParams doesn't blow up

Author: maxkorp

typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { Suspense, useState } from "react";
 import { ViewerLayout } from "@/components/layout/viewer-layout";
 import { Sidebar } from "@/components/sidebar/sidebar";
 
@@ -9,10 +9,7 @@ import featureConfig from "@/config";
 
 export function MainLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
-  const searchParams = useSearchParams();
 
-  const sidebarDisabled = searchParams.get("sidebar") === "disabled";
-  const integrationPickerDisabled = searchParams.get("picker") === "false";
 
   // Extract the current demo ID from the pathname
   const pathParts = pathname.split("/");
@@ -23,7 +20,10 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
     <ViewerLayout showFileTree={false} showCodeEditor={false}>
       <div className="flex h-full w-full overflow-hidden">
         {/* Sidebar */}
-        {!sidebarDisabled && <Sidebar activeTab={"preview"} readmeContent={""} pickerDisabled={integrationPickerDisabled} />}
+        <Suspense>
+          <MaybeSidebar/>
+        </Suspense>
+
 
         {/* Content */}
         <div className="flex-1 overflow-auto">
@@ -33,3 +33,12 @@ export function MainLayout({ children }: { children: React.ReactNode }) {
     </ViewerLayout>
   );
 }
+
+function MaybeSidebar() {
+  const searchParams = useSearchParams();
+
+  const sidebarDisabled = searchParams.get("sidebar") === "disabled";
+  const integrationPickerDisabled = searchParams.get("picker") === "false";
+
+  return !sidebarDisabled && <Sidebar activeTab={"preview"} readmeContent={""} pickerDisabled={integrationPickerDisabled} />;
+}