From 7baa3e554085ecd9ef52468c2e8d8bbe14af538a Mon Sep 17 00:00:00 2001
From: Palanikannan M <akashmalinimurugu@gmail.com>
Date: Fri, 14 Jun 2024 14:56:45 +0530
Subject: [PATCH] fix: yarn lock

---
 .../components/pages/editor/editor-body.tsx   |   4 +-
 .../pages/loaders/page-content-loader.tsx     | 117 ++++++++++++++++++
 yarn.lock                                     |  22 ----
 3 files changed, 119 insertions(+), 24 deletions(-)
 create mode 100644 web/core/components/pages/loaders/page-content-loader.tsx

diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx
index 91b1703e7..3f859f1a2 100644
--- a/web/core/components/pages/editor/editor-body.tsx
+++ b/web/core/components/pages/editor/editor-body.tsx
@@ -12,7 +12,7 @@ import {
 // types
 import { IUserLite } 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
@@ -86,7 +86,7 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
     updateMarkings(pageDescription ?? "<p></p>");
   }, [pageDescription, updateMarkings]);
 
-  // if (pageId === undefined || !pageDescriptionYJS || !isDescriptionReady) return <PageContentLoader />;
+  if (pageId === undefined || !pageDescriptionYJS || !isDescriptionReady) return <PageContentLoader />;
 
   return (
     <div className="flex items-center h-full w-full overflow-y-auto">
diff --git a/web/core/components/pages/loaders/page-content-loader.tsx b/web/core/components/pages/loaders/page-content-loader.tsx
new file mode 100644
index 000000000..0341f2b06
--- /dev/null
+++ b/web/core/components/pages/loaders/page-content-loader.tsx
@@ -0,0 +1,117 @@
+// 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>
+);
diff --git a/yarn.lock b/yarn.lock
index af7496c91..11a57223c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8843,8 +8843,6 @@ isobject@^3.0.1:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
   integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==
 
-<<<<<<< HEAD
-=======
 isomorphic-dompurify@^2.12.0:
   version "2.12.0"
   resolved "https://registry.yarnpkg.com/isomorphic-dompurify/-/isomorphic-dompurify-2.12.0.tgz#fd63aa7d1509f6fcf24f824b36cef06e663808b7"
@@ -8854,7 +8852,6 @@ isomorphic-dompurify@^2.12.0:
     dompurify "^3.1.5"
     jsdom "^24.1.0"
 
->>>>>>> develop
 isomorphic.js@^0.2.4:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/isomorphic.js/-/isomorphic.js-0.2.5.tgz#13eecf36f2dba53e85d355e11bf9d4208c6f7f88"
@@ -9152,22 +9149,9 @@ levn@^0.4.1:
     type-check "~0.4.0"
 
 lib0@^0.2.42, lib0@^0.2.74, lib0@^0.2.85, lib0@^0.2.86:
-<<<<<<< HEAD
-  version "0.2.93"
-  resolved "https://registry.yarnpkg.com/lib0/-/lib0-0.2.93.tgz#95487c2a97657313cb1d91fbcf9f6d64b7fcd062"
-  integrity sha512-M5IKsiFJYulS+8Eal8f+zAqf5ckm1vffW0fFDxfgxJ+uiVopvDdd3PxJmz0GsVi3YNO7QCFSq0nAsiDmNhLj9Q==
-  dependencies:
-    isomorphic.js "^0.2.4"
-
-lie@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/lie/-/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
-  integrity sha512-RiNhHysUjhrDQntfYSfY4MU24coXXdEOgw9WGcKHNeEwffDYbF//u87M1EWaMGzuFoSbqW0C9C6lEEhDOAswfw==
-=======
   version "0.2.94"
   resolved "https://registry.yarnpkg.com/lib0/-/lib0-0.2.94.tgz#fc28b4b65f816599f1e2f59d3401e231709535b3"
   integrity sha512-hZ3p54jL4Wpu7IOg26uC7dnEWiMyNlUrb9KoG7+xYs45WkQwpVvKFndVq2+pqLYKe1u8Fp3+zAfZHVvTK34PvQ==
->>>>>>> develop
   dependencies:
     isomorphic.js "^0.2.4"
 
@@ -13991,15 +13975,9 @@ y-indexeddb@^9.0.12:
     lib0 "^0.2.74"
 
 y-prosemirror@^1.2.5:
-<<<<<<< HEAD
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/y-prosemirror/-/y-prosemirror-1.2.5.tgz#c448f80a6017190bc69a30a33f3930e9924fad3a"
-  integrity sha512-T/JATxC8P2Dbvq/dAiaiztD1a8KEwRP8oLRlT8YlaZdNlLGE1Ea0IJ8If25UlDYmk+4+uqLbqT/S+dzUmwwgbA==
-=======
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/y-prosemirror/-/y-prosemirror-1.2.6.tgz#a324991cc158a6ff3b3f5902111b3dbf8928e603"
   integrity sha512-rGz8kX4v/uFJrLaqZvsezY1JGN/zTDSPMO76zRbNcpE63OEiw2PBCEQi9ZlfbEwgCMoeJLUT+otNyO/Oj73TGQ==
->>>>>>> develop
   dependencies:
     lib0 "^0.2.42"