snapshot of https://github.com/makeplane/plane.git @ d868349a55de79979eb8b98701bf1702c67ad634 (2026-09-15)

apps/web/core/components/pages/loaders/page-content-loader.tsx

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+// plane imports
+import { Loader } from "@plane/ui";
+import { cn } from "@plane/utils";
+
+type Props = {
+  className?: string;
+};
+
+export function PageContentLoader(props: Props) {
+  const { className } = props;
+
+  return (
+    <div className={cn("relative flex size-full flex-col", className)}>
+      {/* header */}
+      <div className="relative flex h-12 w-full flex-shrink-0 items-center divide-x divide-subtle border-b border-subtle">
+        <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>
+
+      {/* content */}
+      <div className="relative flex size-full overflow-hidden pt-[64px]">
+        {/* editor loader */}
+        <div className="size-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>
+  );
+}

apps/web/core/components/pages/loaders/page-loader.tsx

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { range } from "lodash-es";
+import { Loader } from "@plane/ui";
+
+export function PageLoader() {
+  return (
+    <div className="relative flex h-full w-full flex-col">
+      <div className="border-b border-subtle px-3 py-3">
+        <Loader className="relative flex items-center gap-2">
+          <Loader.Item width="200px" height="30px" />
+          <div className="relative ml-auto flex items-center gap-2">
+            <Loader.Item width="100px" height="30px" />
+            <Loader.Item width="100px" height="30px" />
+          </div>
+        </Loader>
+      </div>
+      <div>
+        {range(10).map((i) => (
+          <Loader key={i} className="relative flex items-center gap-2 border-b border-subtle p-3 py-4">
+            <Loader.Item width={`${250 + 10 * Math.floor(Math.random() * 10)}px`} height="22px" />
+            <div className="relative ml-auto flex items-center gap-2">
+              <Loader.Item width="60px" height="22px" />
+              <Loader.Item width="22px" height="22px" />
+              <Loader.Item width="22px" height="22px" />
+              <Loader.Item width="22px" height="22px" />
+            </div>
+          </Loader>
+        ))}
+      </div>
+    </div>
+  );
+}