Merge pull request #239 from ecency/feature/entry-page-loading-state

Added loading screen for entry pages

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";

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>
+  );
+}

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">