revert to local hosting

frontend/app/(app)/code/[id]/page.tsx

@@ -4,6 +4,8 @@ import { Sandbox, User, UsersToSandboxes } from "@/lib/types"
 import { currentUser } from "@clerk/nextjs"
 import { notFound, redirect } from "next/navigation"
 import Editor from "@/components/editor"
+import Loading from "@/components/editor/loading"
+import dynamic from "next/dynamic"
 
 export const revalidate = 0
 
@@ -41,6 +43,11 @@ const getSharedUsers = async (usersToSandboxes: UsersToSandboxes[]) => {
   return shared
 }
 
+const CodeEditor = dynamic(() => import("@/components/editor"), {
+  ssr: false,
+  loading: () => <Loading />,
+})
+
 export default async function CodePage({ params }: { params: { id: string } }) {
   const user = await currentUser()
   const sandboxId = params.id
@@ -67,7 +74,7 @@ export default async function CodePage({ params }: { params: { id: string } }) {
       <Room id={sandboxId}>
         <Navbar userData={userData} sandboxData={sandboxData} shared={shared} />
         <div className="w-screen flex grow">
-          <Editor userData={userData} sandboxData={sandboxData} />
+          <CodeEditor userData={userData} sandboxData={sandboxData} />
         </div>
       </Room>
     </div>

frontend/app/layout.tsx

@@ -1,21 +1,21 @@
-import type { Metadata } from "next";
-import { GeistSans } from "geist/font/sans";
-import { GeistMono } from "geist/font/mono";
-import "./globals.css";
-import { ThemeProvider } from "@/components/layout/themeProvider";
-import { ClerkProvider } from "@clerk/nextjs";
-import { Toaster } from "@/components/ui/sonner";
-import { Analytics } from "@vercel/analytics/react";
+import type { Metadata } from "next"
+import { GeistSans } from "geist/font/sans"
+import { GeistMono } from "geist/font/mono"
+import "./globals.css"
+import { ThemeProvider } from "@/components/layout/themeProvider"
+import { ClerkProvider } from "@clerk/nextjs"
+import { Toaster } from "@/components/ui/sonner"
+import { Analytics } from "@vercel/analytics/react"
 
 export const metadata: Metadata = {
   title: "Sandbox",
-  description: "A collaborative, AI-powered, auto-scaling code sandbox",
-};
+  description: "A collaborative, AI-powered cloud code editing environment",
+}
 
 export default function RootLayout({
   children,
 }: Readonly<{
-  children: React.ReactNode;
+  children: React.ReactNode
 }>) {
   return (
     <ClerkProvider>
@@ -34,5 +34,5 @@ export default function RootLayout({
         </body>
       </html>
     </ClerkProvider>
-  );
+  )
 }