thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

[WEB-1181] chore: added a loader for page description (#4358)

Browse Source 
* chore: add loader for page description

* chore: added skeleton loader

* fix: title loader margin

* chore: increased laoder width
This commit is contained in:
Aaryan Khandelwal 2024-05-03 23:12:44 +05:30 committed by GitHub
parent c96225c812
commit fb74875cde
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 35 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/components/pages/editor/editor-body.tsx
View File

@ -13,7 +13,7 @@ import {
// types
import { IUserLite, TPage } from "@plane/types";
// components
import { PageContentBrowser, PageEditorTitle } from "@/components/pages";
import { PageContentBrowser, PageContentLoader, PageEditorTitle } from "@/components/pages";
// helpers
import { cn } from "@/helpers/common.helper";
// hooks
@ -68,7 +68,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
// derived values
const workspaceId = workspaceSlug ? getWorkspaceBySlug(workspaceSlug.toString())?.id ?? "" : "";
const pageTitle = pageStore?.name ?? "";
const pageDescription = pageStore?.description_html ?? "<p></p>";
const pageDescription = pageStore?.description_html;
const { description_html, isContentEditable, updateTitle, isSubmitting, setIsSubmitting } = pageStore;
const projectMemberIds = projectId ? getProjectMemberIds(projectId.toString()) : [];
const projectMemberDetails = projectMemberIds?.map((id) => getUserDetails(id) as IUserLite);
@ -88,6 +88,8 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
updateMarkings(description_html ?? "<p></p>");
}, [description_html, updateMarkings]);
if (pageDescription === undefined) return <PageContentLoader />;
return (
<div className="flex items-center h-full w-full overflow-y-auto">
<div
@ -132,7 +134,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
upload: fileService.getUploadFileFunction(workspaceSlug as string, setIsSubmitting),
}}
handleEditorReady={handleEditorReady}
initialValue={pageDescription}
initialValue={pageDescription ?? "<p></p>"}
value={swrPageDetails?.description_html ?? "<p></p>"}
ref={editorRef}
containerClassName="p-0 pb-64"
@ -153,7 +155,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
) : (
<DocumentReadOnlyEditorWithRef
ref={readOnlyEditorRef}
initialValue={pageDescription}
initialValue={pageDescription ?? "<p></p>"}
handleEditorReady={handleReadOnlyEditorReady}
containerClassName="p-0 pb-64 border-none"
editorClassName="lg:px-10 pl-8"

1
web/components/pages/loaders/index.ts
View File

@ -1 +1,2 @@
export * from "./page-content-loader";
export * from "./page-loader";

28
web/components/pages/loaders/page-content-loader.tsx Normal file
View File

@ -0,0 +1,28 @@
// ui
import { Loader } from "@plane/ui";
export const PageContentLoader = () => (
<div className="flex">
<div className="w-[5%]" />
<Loader className="flex-shrink-0 flex-grow">
<div className="mt-10 space-y-2">
<Loader.Item height="20px" />
<Loader.Item height="20px" width="80%" />
<Loader.Item height="20px" width="80%" />
</div>
<div className="mt-12 space-y-10">
{Array.from(Array(4)).map((i) => (
<div key={i}>
<Loader.Item height="25px" width="20%" />
<div className="mt-5 space-y-3">
<Loader.Item height="15px" width="40%" />
<Loader.Item height="15px" width="30%" />
<Loader.Item height="15px" width="35%" />
</div>
</div>
))}
</div>
</Loader>
<div className="w-[5%]" />
</div>
);