From ae1a7efad358e1db0989ff825b85aee57e7774ad Mon Sep 17 00:00:00 2001
From: "ildar.timerbaev" <dkildar@gmail.com>
Date: Sun, 26 Jan 2025 15:24:56 +0300
Subject: [PATCH] Added loading screen for entry pages

---
 .../_components/entry-page-loading-screen.tsx | 23 ---------------
 .../[author]/[permlink]/_components/index.ts  |  1 -
 .../[author]/[permlink]/loading.tsx           | 29 +++++++++++++++++++
 .../[category]/[author]/[permlink]/page.tsx   |  2 --
 4 files changed, 29 insertions(+), 26 deletions(-)
 delete mode 100644 src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-loading-screen.tsx
 create mode 100644 src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/loading.tsx

diff --git a/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-loading-screen.tsx b/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-loading-screen.tsx
deleted file mode 100644
index 8ddc7f61a..000000000
--- a/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/entry-page-loading-screen.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-"use client";
-
-import React, { useContext } from "react";
-import { LinearProgress } from "@/features/shared";
-import { EntryPageContext } from "@/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/context";
-
-export const EntryPageLoadingScreen = () => {
-  const { loading } = useContext(EntryPageContext);
-
-  return (
-    <>
-      {loading && (
-        <div className="mt-5">
-          <div className="pt-2">
-            <div className="mt-1">
-              <LinearProgress />
-            </div>
-          </div>
-        </div>
-      )}
-    </>
-  );
-};
diff --git a/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/index.ts b/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/index.ts
index e628c22f7..10b8cd977 100644
--- a/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/index.ts
+++ b/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/_components/index.ts
@@ -1,6 +1,5 @@
 export * from "./deleted-post-screen";
 export * from "./distance-detector";
-export * from "./entry-page-loading-screen";
 export * from "./similar-entries";
 export * from "./md-handler";
 export * from "./entry-read-time";
diff --git a/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/loading.tsx b/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/loading.tsx
new file mode 100644
index 000000000..7e6b9fede
--- /dev/null
+++ b/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/loading.tsx
@@ -0,0 +1,29 @@
+export default function Loading() {
+  return (
+    <div className="app-content entry-page">
+      <div className="the-entry">
+        <div className="w-[80%] mb-[22px] mt-4 rounded-full animate-pulse h-[57px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+        <div className="flex items-center gap-4">
+          <div className="w-[54px] rounded-full animate-pulse h-[54px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+          <div className="flex flex-col gap-1">
+            <div className="w-[203px] rounded-full animate-pulse h-[28px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+            <div className="w-[203px] rounded-full animate-pulse h-[22px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+          </div>
+        </div>
+        <div className="mt-4 border-y border-[--border-color] py-2 flex justify-between">
+          <div className="w-[140px] rounded-full animate-pulse h-[32px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+          <div className="w-[110px] rounded-full animate-pulse h-[32px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+        </div>
+
+        <div className="w-full mt-10 rounded-full animate-pulse h-[24px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+        <div className="w-full mt-2 rounded-full animate-pulse h-[24px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+        <div className="w-full mt-2 rounded-2xl animate-pulse h-[300px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+        <div className="w-full mt-2 rounded-full animate-pulse h-[24px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+        <div className="w-full mt-2 rounded-full animate-pulse h-[24px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+        <div className="w-full mt-2 rounded-full animate-pulse h-[24px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+        <div className="w-full mt-2 rounded-full animate-pulse h-[24px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+        <div className="w-full mt-2 rounded-full animate-pulse h-[24px] bg-blue-dark-sky-040 dark:bg-blue-dark-grey" />
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/page.tsx b/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/page.tsx
index 759bc530d..ad7ff22c6 100644
--- a/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/page.tsx
+++ b/src/app/(dynamicPages)/entry/[category]/[author]/[permlink]/page.tsx
@@ -6,7 +6,6 @@ import {
   EntryPageContextProvider,
   EntryPageCrossPostHeader,
   EntryPageEditHistory,
-  EntryPageLoadingScreen,
   MdHandler,
   ReadTime
 } from "./_components";
@@ -61,7 +60,6 @@ export default async function EntryPage({ params, searchParams }: Props) {
         <MdHandler />
 
         <div className="app-content entry-page">
-          <EntryPageLoadingScreen />
           <ReadTime entry={entry} />
 
           <div className="the-entry">