import { FC } from "react"; // components/ui import { Loader } from "@plane/ui"; export const PageDetailRootLoader: FC = () => ( <div className=" relative w-full h-full flex flex-col"> {/* header */} <div className="px-4 flex-shrink-0 relative flex items-center justify-between h-12 border-b border-custom-border-100"> {/* left options */} <Loader className="flex-shrink-0 w-[280px]"> <Loader.Item width="26px" height="26px" /> </Loader> {/* editor options */} <div className="w-full relative flex items-center divide-x divide-custom-border-100"> <Loader className="relative flex items-center gap-1 pr-2"> <Loader.Item width="26px" height="26px" /> <Loader.Item width="26px" height="26px" /> <Loader.Item width="26px" height="26px" /> <Loader.Item width="26px" height="26px" /> <Loader.Item width="26px" height="26px" /> <Loader.Item width="26px" height="26px" /> <Loader.Item width="26px" height="26px" /> </Loader> <Loader className="relative flex items-center gap-1 px-2"> <Loader.Item width="26px" height="26px" /> <Loader.Item width="26px" height="26px" /> </Loader> <Loader className="relative flex items-center gap-1 px-2"> <Loader.Item width="26px" height="26px" /> <Loader.Item width="26px" height="26px" /> </Loader> <Loader className="relative flex items-center gap-1 pl-2"> <Loader.Item width="26px" height="26px" /> <Loader.Item width="26px" height="26px" /> </Loader> </div> {/* right options */} <Loader className="w-full relative flex justify-end items-center gap-1"> <Loader.Item width="60px" height="26px" /> <Loader.Item width="40px" height="26px" /> <Loader.Item width="26px" height="26px" /> <Loader.Item width="26px" height="26px" /> </Loader> </div> {/* content */} <div className="px-4 w-full h-full overflow-hidden relative flex"> {/* table of content loader */} <div className="flex-shrink-0 w-[280px] pr-5 py-5"> <Loader className="w-full space-y-4"> <Loader.Item width="100%" height="24px" /> <div className="space-y-2"> <Loader.Item width="60%" height="12px" /> <div className="ml-6 space-y-2"> <Loader.Item width="80%" height="12px" /> <Loader.Item width="100%" height="12px" /> </div> <Loader.Item width="60%" height="12px" /> <div className="ml-6 space-y-2"> <Loader.Item width="80%" height="12px" /> <Loader.Item width="100%" height="12px" /> </div> <Loader.Item width="100%" height="12px" /> <Loader.Item width="60%" height="12px" /> <div className="ml-6 space-y-2"> <Loader.Item width="80%" height="12px" /> <Loader.Item width="100%" height="12px" /> </div> <Loader.Item width="80%" height="12px" /> <Loader.Item width="100%" height="12px" /> </div> </Loader> </div> {/* editor loader */} <div className="w-full h-full py-5"> <Loader className="relative space-y-4"> <Loader.Item width="50%" height="36px" /> <div className="space-y-2"> <div className="py-2"> <Loader.Item width="100%" height="36px" /> </div> <Loader.Item width="80%" height="22px" /> <div className="relative flex items-center gap-2"> <Loader.Item width="30px" height="30px" /> <Loader.Item width="30%" height="22px" /> </div> <div className="py-2"> <Loader.Item width="60%" height="36px" /> </div> <Loader.Item width="70%" height="22px" /> <Loader.Item width="30%" height="22px" /> <div className="relative flex items-center gap-2"> <Loader.Item width="30px" height="30px" /> <Loader.Item width="30%" height="22px" /> </div> <div className="py-2"> <Loader.Item width="50%" height="30px" /> </div> <Loader.Item width="100%" height="22px" /> <div className="py-2"> <Loader.Item width="30%" height="30px" /> </div> <Loader.Item width="30%" height="22px" /> <div className="relative flex items-center gap-2"> <div className="py-2"> <Loader.Item width="30px" height="30px" /> </div> <Loader.Item width="30%" height="22px" /> </div> </div> </Loader> </div> </div> </div> );