mirror of
https://github.com/makeplane/plane
synced 2024-06-14 14:31:34 +00:00
ff03c0b718
* chore: pages realtime * chore: empty binary response * chore: added a ypy package * feat: pages collaboration * chore: update fetching logic * chore: degrade ypy version * chore: replace useEffect fetch logic with useSWR * chore: move all the update logic to the page store * refactor: remove react-hook-form * chore: save description_html as well * chore: migrate old data logic * fix: added description_binary as field name * fix: code cleanup * refactor: create separate hook to handle page description * fix: build errors * chore: combine updates instead of using the whole document * chore: removed ypy package * chore: added conflict resolving logic to the client side * chore: add a save changes button * chore: add read-only validation * chore: remove saving state information * chore: added permission class * chore: removed the migration file * chore: corrected the model field * chore: rename pageStore to page * chore: update collaboration provider * chore: add try catch to handle error --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com>
118 lines
4.7 KiB
TypeScript
118 lines
4.7 KiB
TypeScript
// ui
|
|
import { Loader } from "@plane/ui";
|
|
|
|
export const PageContentLoader = () => (
|
|
<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>
|
|
);
|