From 6ef925e297ac165a49c7870d26c013cd771cec76 Mon Sep 17 00:00:00 2001
From: Max Korp <maxkorp@8bytealchemy.com>
Date: Thu, 24 Jul 2025 15:11:02 -0700
Subject: [PATCH 1/2] Wrap sidebar in a suspense so useSearchParams doesn't
 blow up

---
 .../src/components/layout/main-layout.tsx     | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx b/typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx
index 6ec0c62ca..e9f97669e 100644
--- a/typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx
+++ b/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} />;
+}
\ No newline at end of file

From 09b43962929034456fecc60fb107ac372496b1cd Mon Sep 17 00:00:00 2001
From: Max Korp <maxkorp@8bytealchemy.com>
Date: Thu, 24 Jul 2025 15:12:38 -0700
Subject: [PATCH 2/2] Cleanup unused code from main layout

---
 .../apps/dojo/src/components/layout/main-layout.tsx   | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx b/typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx
index e9f97669e..258b146e6 100644
--- a/typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx
+++ b/typescript-sdk/apps/dojo/src/components/layout/main-layout.tsx
@@ -4,18 +4,9 @@ import React, { Suspense, useState } from "react";
 import { ViewerLayout } from "@/components/layout/viewer-layout";
 import { Sidebar } from "@/components/sidebar/sidebar";
 
-import { usePathname, useSearchParams } from "next/navigation";
-import featureConfig from "@/config";
+import { useSearchParams } from "next/navigation";
 
 export function MainLayout({ children }: { children: React.ReactNode }) {
-  const pathname = usePathname();
-
-
-  // Extract the current demo ID from the pathname
-  const pathParts = pathname.split("/");
-  const currentFeatureId = pathParts[pathParts.length - 1];
-  const currentFeature = featureConfig.find((d) => d.id === currentFeatureId);
-
   return (
     <ViewerLayout showFileTree={false} showCodeEditor={false}>
       <div className="flex h-full w-full overflow-hidden">