From 9bb5ed1517bb018cafb1a1657b1751660a3a5d66 Mon Sep 17 00:00:00 2001
From: Ishaan Dey <ishaan1013@gmail.com>
Date: Sat, 11 May 2024 18:13:01 -0700
Subject: [PATCH] fix loading state

---
 frontend/app/(app)/code/[id]/page.tsx       |  1 +
 frontend/components/editor/loading.tsx      | 62 +++++++++++----------
 frontend/components/editor/navbar/index.tsx | 44 +++++++--------
 3 files changed, 55 insertions(+), 52 deletions(-)

diff --git a/frontend/app/(app)/code/[id]/page.tsx b/frontend/app/(app)/code/[id]/page.tsx
index fe6a253..6d123eb 100644
--- a/frontend/app/(app)/code/[id]/page.tsx
+++ b/frontend/app/(app)/code/[id]/page.tsx
@@ -9,6 +9,7 @@ import { Suspense } from "react";
 
 const CodeEditor = dynamic(() => import("@/components/editor"), {
   ssr: false,
+  loading: () => <Loading />,
 });
 
 const getUserData = async (id: string) => {
diff --git a/frontend/components/editor/loading.tsx b/frontend/components/editor/loading.tsx
index 662e354..5ee9ca8 100644
--- a/frontend/components/editor/loading.tsx
+++ b/frontend/components/editor/loading.tsx
@@ -3,43 +3,45 @@ import Logo from "@/assets/logo.svg";
 import { Skeleton } from "../ui/skeleton";
 import { Loader, Loader2 } from "lucide-react";
 
-export default function Loading() {
+export default function Loading({ withNav = false }: { withNav?: boolean }) {
   return (
-    // <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
-    // <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
-    //   <div className="flex items-center space-x-4">
-    //     <Image src={Logo} alt="Logo" width={36} height={36} />
-    //     <Skeleton className="w-[100px] h-[24px] rounded-md" />
-    //   </div>
-    //   <div className="flex items-center space-x-4">
-    //     <Skeleton className="w-[64px] h-[36px] rounded-md" />
-    //     <Skeleton className="w-[36px] h-[36px] rounded-full" />
-    //   </div>
-    // </div>
-    <div className="grow flex w-screen">
-      <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
-        <div className="flex w-full items-center justify-between h-8 mb-1 ">
-          <div className="text-muted-foreground">Explorer</div>
-          <div className="flex space-x-1">
-            <Skeleton className="w-6 h-6 rounded-md" />
-            <Skeleton className="w-6 h-6 rounded-md" />
+    <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background">
+      {withNav ? (
+        <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
+          <div className="flex items-center space-x-4">
+            <Image src={Logo} alt="Logo" width={36} height={36} />
+            <Skeleton className="w-[100px] h-[24px] rounded-md" />
+          </div>
+          <div className="flex items-center space-x-4">
+            <Skeleton className="w-[64px] h-[36px] rounded-md" />
+            <Skeleton className="w-[36px] h-[36px] rounded-full" />
           </div>
         </div>
-        <div className="w-full mt-1 flex flex-col">
-          <div className="w-full flex justify-center">
-            <Loader2 className="w-4 h-4 animate-spin" />
+      ) : null}
+      <div className="grow flex w-screen">
+        <div className="h-full w-56 select-none flex flex-col text-sm items-start p-2">
+          <div className="flex w-full items-center justify-between h-8 mb-1 ">
+            <div className="text-muted-foreground">Explorer</div>
+            <div className="flex space-x-1">
+              <Skeleton className="w-6 h-6 rounded-md" />
+              <Skeleton className="w-6 h-6 rounded-md" />
+            </div>
+          </div>
+          <div className="w-full mt-1 flex flex-col">
+            <div className="w-full flex justify-center">
+              <Loader2 className="w-4 h-4 animate-spin" />
+            </div>
           </div>
         </div>
-      </div>
-      <div className="w-full h-full grid grid-cols-5 grid-rows-2 gap-4 p-2">
-        <div className="w-full h-full col-span-3 row-span-2 flex items-center justify-center text-xl font-medium text-secondary select-none">
-          <Loader2 className="w-6 h-6 mr-3 animate-spin" />
-          Loading...
+        <div className="w-full h-full grid grid-cols-5 grid-rows-2 gap-4 p-2">
+          <div className="w-full h-full col-span-3 row-span-2 flex items-center justify-center text-xl font-medium text-secondary select-none">
+            <Loader2 className="w-6 h-6 mr-3 animate-spin" />
+            Loading...
+          </div>
+          <Skeleton className="w-full h-full col-span-2 rounded-md" />
+          <Skeleton className="w-full h-full col-span-2 rounded-md" />
         </div>
-        <Skeleton className="w-full h-full col-span-2 rounded-md" />
-        <Skeleton className="w-full h-full col-span-2 rounded-md" />
       </div>
     </div>
-    // </div>
   );
 }
diff --git a/frontend/components/editor/navbar/index.tsx b/frontend/components/editor/navbar/index.tsx
index b5cfede..413200b 100644
--- a/frontend/components/editor/navbar/index.tsx
+++ b/frontend/components/editor/navbar/index.tsx
@@ -1,33 +1,33 @@
-"use client"
+"use client";
 
-import Image from "next/image"
-import Logo from "@/assets/logo.svg"
-import { Pencil, Users } from "lucide-react"
-import Link from "next/link"
-import { Sandbox, User } from "@/lib/types"
-import UserButton from "@/components/ui/userButton"
-import { Button } from "@/components/ui/button"
-import { useState } from "react"
-import EditSandboxModal from "./edit"
-import ShareSandboxModal from "./share"
-import { Avatars } from "../live/avatars"
+import Image from "next/image";
+import Logo from "@/assets/logo.svg";
+import { Pencil, Users } from "lucide-react";
+import Link from "next/link";
+import { Sandbox, User } from "@/lib/types";
+import UserButton from "@/components/ui/userButton";
+import { Button } from "@/components/ui/button";
+import { useState } from "react";
+import EditSandboxModal from "./edit";
+import ShareSandboxModal from "./share";
+import { Avatars } from "../live/avatars";
 
 export default function Navbar({
   userData,
   sandboxData,
   shared,
 }: {
-  userData: User
-  sandboxData: Sandbox
+  userData: User;
+  sandboxData: Sandbox;
   shared: {
-    id: string
-    name: string
-  }[]
+    id: string;
+    name: string;
+  }[];
 }) {
-  const [isEditOpen, setIsEditOpen] = useState(false)
-  const [isShareOpen, setIsShareOpen] = useState(false)
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [isShareOpen, setIsShareOpen] = useState(false);
 
-  const isOwner = sandboxData.userId === userData.id
+  const isOwner = sandboxData.userId === userData.id;
 
   return (
     <>
@@ -42,7 +42,7 @@ export default function Navbar({
         data={sandboxData}
         shared={shared}
       />
-      <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
+      <div className="h-14 shrink-0 px-2 w-full flex items-center justify-between border-b border-border">
         <div className="flex items-center space-x-4">
           <Link
             href="/"
@@ -75,5 +75,5 @@ export default function Navbar({
         </div>
       </div>
     </>
-  )
+  );
 }