TNT-Flo/sandbox-web-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix loading state

Browse Source
This commit is contained in:
Ishaan Dey 2024-05-11 18:13:01 -07:00
parent b496ab193d
commit 9bb5ed1517
3 changed files with 55 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,6 +9,7 @@ import { Suspense } from "react";
const CodeEditor = dynamic(() => import("@/components/editor"), { const CodeEditor = dynamic(() => import("@/components/editor"), {
ssr: false, ssr: false,
loading: () => <Loading />,
}); });
const getUserData = async (id: string) => { const getUserData = async (id: string) => {

28
frontend/components/editor/loading.tsx
View File

@ -3,19 +3,21 @@ import Logo from "@/assets/logo.svg";
import { Skeleton } from "../ui/skeleton"; import { Skeleton } from "../ui/skeleton";
import { Loader, Loader2 } from "lucide-react"; import { Loader, Loader2 } from "lucide-react";
export default function Loading() { export default function Loading({ withNav = false }: { withNav?: boolean }) {
return ( return (
// <div className="overflow-hidden overscroll-none w-screen flex flex-col h-screen bg-background"> <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"> {withNav ? (
// <div className="flex items-center space-x-4"> <div className="h-14 px-2 w-full flex items-center justify-between border-b border-border">
// <Image src={Logo} alt="Logo" width={36} height={36} /> <div className="flex items-center space-x-4">
// <Skeleton className="w-[100px] h-[24px] rounded-md" /> <Image src={Logo} alt="Logo" width={36} height={36} />
// </div> <Skeleton className="w-[100px] h-[24px] rounded-md" />
// <div className="flex items-center space-x-4"> </div>
// <Skeleton className="w-[64px] h-[36px] rounded-md" /> <div className="flex items-center space-x-4">
// <Skeleton className="w-[36px] h-[36px] rounded-full" /> <Skeleton className="w-[64px] h-[36px] rounded-md" />
// </div> <Skeleton className="w-[36px] h-[36px] rounded-full" />
// </div> </div>
</div>
) : null}
<div className="grow flex w-screen"> <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="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="flex w-full items-center justify-between h-8 mb-1 ">
@ -40,6 +42,6 @@ export default function Loading() {
<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> </div>
// </div> </div>
); );
} }

44
frontend/components/editor/navbar/index.tsx
View File

@ -1,33 +1,33 @@
"use client" "use client";
import Image from "next/image" import Image from "next/image";
import Logo from "@/assets/logo.svg" import Logo from "@/assets/logo.svg";
import { Pencil, Users } from "lucide-react" import { Pencil, Users } from "lucide-react";
import Link from "next/link" import Link from "next/link";
import { Sandbox, User } from "@/lib/types" import { Sandbox, User } from "@/lib/types";
import UserButton from "@/components/ui/userButton" import UserButton from "@/components/ui/userButton";
import { Button } from "@/components/ui/button" import { Button } from "@/components/ui/button";
import { useState } from "react" import { useState } from "react";
import EditSandboxModal from "./edit" import EditSandboxModal from "./edit";
import ShareSandboxModal from "./share" import ShareSandboxModal from "./share";
import { Avatars } from "../live/avatars" import { Avatars } from "../live/avatars";
export default function Navbar({ export default function Navbar({
userData, userData,
sandboxData, sandboxData,
shared, shared,
}: { }: {
userData: User userData: User;
sandboxData: Sandbox sandboxData: Sandbox;
shared: { shared: {
id: string id: string;
name: string name: string;
}[] }[];
}) { }) {
const [isEditOpen, setIsEditOpen] = useState(false) const [isEditOpen, setIsEditOpen] = useState(false);
const [isShareOpen, setIsShareOpen] = useState(false) const [isShareOpen, setIsShareOpen] = useState(false);
const isOwner = sandboxData.userId === userData.id const isOwner = sandboxData.userId === userData.id;
return ( return (
<> <>
@ -42,7 +42,7 @@ export default function Navbar({
data={sandboxData} data={sandboxData}
shared={shared} 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"> <div className="flex items-center space-x-4">
<Link <Link
href="/" href="/"
@ -75,5 +75,5 @@ export default function Navbar({
</div> </div>
</div> </div>
</> </>
) );
} }