From fb74875cdee5df1e19d98d78b79eb92737d80665 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Fri, 3 May 2024 23:12:44 +0530
Subject: [PATCH] [WEB-1181] chore: added a loader for page description (#4358)

* chore: add loader for page description

* chore: added skeleton loader

* fix: title loader margin

* chore: increased laoder width
---
 web/components/pages/editor/editor-body.tsx   | 10 ++++---
 web/components/pages/loaders/index.ts         |  1 +
 .../pages/loaders/page-content-loader.tsx     | 28 +++++++++++++++++++
 3 files changed, 35 insertions(+), 4 deletions(-)
 create mode 100644 web/components/pages/loaders/page-content-loader.tsx

diff --git a/web/components/pages/editor/editor-body.tsx b/web/components/pages/editor/editor-body.tsx
index f1e38348b2..0ea7e6052c 100644
--- a/web/components/pages/editor/editor-body.tsx
+++ b/web/components/pages/editor/editor-body.tsx
@@ -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"
diff --git a/web/components/pages/loaders/index.ts b/web/components/pages/loaders/index.ts
index f278fa3823..8760eede6c 100644
--- a/web/components/pages/loaders/index.ts
+++ b/web/components/pages/loaders/index.ts
@@ -1 +1,2 @@
+export * from "./page-content-loader";
 export * from "./page-loader";
diff --git a/web/components/pages/loaders/page-content-loader.tsx b/web/components/pages/loaders/page-content-loader.tsx
new file mode 100644
index 0000000000..ec38c1bbe7
--- /dev/null
+++ b/web/components/pages/loaders/page-content-loader.tsx
@@ -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>
+);