From 16d3b1dbd8bd446c2b908e5ad57e4c78d34b0cc1 Mon Sep 17 00:00:00 2001
From: MTG2000 <mtg0987654321@gmail.com>
Date: Wed, 27 Jul 2022 18:04:41 +0300
Subject: [PATCH] feat: built loading skeleton components for
 post-details-page, presist page when transitioning between pages instead of
 blank page

---
 .../Components/TrendingCard/TrendingCard.tsx  |  2 +-
 .../AuthorCard/AuthorCard.skeleton.tsx        | 29 ++++++++++
 .../PageContent/PageContent.skeleton.tsx      | 35 ++++++++++++
 .../PostActions/PostActions.skeleton.tsx      | 38 +++++++++++++
 .../StoryPageContent/StoryPageContent.tsx     |  2 +-
 .../PostDetailsPage.skeleton.tsx              | 57 +++++++++++++++++++
 .../pages/PostDetailsPage/PostDetailsPage.tsx |  5 +-
 .../pages/PostDetailsPage/styles.module.scss  |  2 +-
 src/utils/routing/FallbackProvider.tsx        | 38 +++++++++++++
 src/utils/routing/Page.tsx                    | 21 +++++++
 src/utils/routing/layouts/NavbarLayout.tsx    |  5 +-
 src/utils/routing/loadable.tsx                |  6 +-
 src/utils/routing/scrollToTop.tsx             | 12 ++++
 src/utils/routing/usePage.ts                  | 16 ++++++
 14 files changed, 260 insertions(+), 8 deletions(-)
 create mode 100644 src/features/Posts/pages/PostDetailsPage/Components/AuthorCard/AuthorCard.skeleton.tsx
 create mode 100644 src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.skeleton.tsx
 create mode 100644 src/features/Posts/pages/PostDetailsPage/Components/PostActions/PostActions.skeleton.tsx
 create mode 100644 src/features/Posts/pages/PostDetailsPage/PostDetailsPage.skeleton.tsx
 create mode 100644 src/utils/routing/FallbackProvider.tsx
 create mode 100644 src/utils/routing/Page.tsx
 create mode 100644 src/utils/routing/scrollToTop.tsx
 create mode 100644 src/utils/routing/usePage.ts

diff --git a/src/features/Posts/Components/TrendingCard/TrendingCard.tsx b/src/features/Posts/Components/TrendingCard/TrendingCard.tsx
index b6f9f6a..c1f19e6 100644
--- a/src/features/Posts/Components/TrendingCard/TrendingCard.tsx
+++ b/src/features/Posts/Components/TrendingCard/TrendingCard.tsx
@@ -17,7 +17,7 @@ export default function TrendingCard() {
             <ul className='flex flex-col'>
                 {
                     trendingPosts.loading ?
-                        Array(4).fill(0).map((_, idx) => <li key={idx} className="flex items-start gap-8">
+                        Array(4).fill(0).map((_, idx) => <li key={idx} className="flex items-start gap-8 border-b py-16 last-of-type:border-b-0">
                             <Skeleton circle width={24} height={24} />
                             <p className="text-body5 font-medium flex-grow"><Skeleton width={'80%'} />
                                 <Skeleton width={`${random(30, 65)}%`} /></p>
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/AuthorCard/AuthorCard.skeleton.tsx b/src/features/Posts/pages/PostDetailsPage/Components/AuthorCard/AuthorCard.skeleton.tsx
new file mode 100644
index 0000000..69248f7
--- /dev/null
+++ b/src/features/Posts/pages/PostDetailsPage/Components/AuthorCard/AuthorCard.skeleton.tsx
@@ -0,0 +1,29 @@
+import dayjs from "dayjs";
+import { Link } from "react-router-dom";
+import Button from "src/Components/Button/Button";
+import { Author } from "src/features/Posts/types";
+import Avatar from "src/features/Profiles/Components/Avatar/Avatar";
+import { trimText } from "src/utils/helperFunctions";
+import { createRoute } from "src/utils/routing";
+import Skeleton from 'react-loading-skeleton';
+
+
+export default function AuthorCardSkeleton() {
+    return (
+        <div className="bg-white p-16 border-2 border-gray-200 rounded-12">
+            <div className='flex gap-8'>
+                <Skeleton circle width={48} height={48} />
+                <div className="overflow-hidden">
+                    <p className={`'text-body4' text-black font-medium overflow-hidden text-ellipsis whitespace-nowrap`}><Skeleton width={'15ch'} /></p>
+                    <p className={`text-body6 text-gray-600`}><Skeleton width={'20ch'} /></p>
+                </div>
+            </div>
+            <Button
+                fullWidth
+                color="gray"
+                className="mt-16">
+                <div className="opacity-0">Hidden</div>
+            </Button>
+        </div>
+    )
+}
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.skeleton.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.skeleton.tsx
new file mode 100644
index 0000000..f12daef
--- /dev/null
+++ b/src/features/Posts/pages/PostDetailsPage/Components/PageContent/PageContent.skeleton.tsx
@@ -0,0 +1,35 @@
+
+import Skeleton from "react-loading-skeleton";
+import Badge from "src/Components/Badge/Badge";
+import HeaderSkeleton from "src/features/Posts/Components/PostCard/Header/Header.Skeleton";
+
+
+
+export default function PageContentSkeleton() {
+    return <div id="content" className="bg-white md:p-32 md:border-2 border-gray-200 rounded-16 relative">
+        <div className="flex flex-col gap-24 relative">
+            <h1 className="text-[42px] leading-[58px] font-bolder">
+                <Skeleton width={'min(80%,16ch)'} />
+            </h1>
+            <HeaderSkeleton />
+            <div className="flex flex-wrap gap-8">
+                {Array(3).fill(0).map(i => <Badge key={i} size='sm'>
+                    <div className="opacity-0">hidden</div>
+                </Badge>)}
+            </div>
+        </div>
+
+        <div className={`mt-42 text-body4`}>
+            <Skeleton width={'100%'} />
+            <Skeleton width={'90%'} />
+            <Skeleton width={'92%'} />
+            <Skeleton width={'70%'} />
+            <div className="mt-32"></div>
+            <Skeleton width={'100%'} />
+            <Skeleton width={'92%'} />
+            <Skeleton width={'95%'} />
+            <Skeleton width={'40%'} />
+        </div>
+    </div>
+
+}
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/PostActions/PostActions.skeleton.tsx b/src/features/Posts/pages/PostDetailsPage/Components/PostActions/PostActions.skeleton.tsx
new file mode 100644
index 0000000..9c9ef7e
--- /dev/null
+++ b/src/features/Posts/pages/PostDetailsPage/Components/PostActions/PostActions.skeleton.tsx
@@ -0,0 +1,38 @@
+import { BsBookmark } from "react-icons/bs"
+import { FiArrowLeft } from "react-icons/fi"
+import { MdIosShare } from "react-icons/md"
+import { useNavigate } from "react-router-dom"
+import VoteButton from "src/Components/VoteButton/VoteButton"
+import { Post } from "src/features/Posts/types"
+import { Vote_Item_Type } from "src/graphql"
+import { useVote } from "src/utils/hooks"
+
+
+export default function PostActionsSkeleton() {
+
+    const actions = [
+        {
+            icon: MdIosShare,
+            value: '--'
+        },
+    ];
+
+
+
+
+    const navigate = useNavigate();
+
+
+    return (
+        <div>
+            <button className={`
+            hidden md:flex w-full aspect-square bg-white rounded-12 border-2 border-gray-200 justify-around items-center text-gray-500 hover:bg-gray-50 active:bg-gray-100
+            `}
+                onClick={() => navigate(-1)}
+            >
+                <FiArrowLeft className={"text-body1"} />
+            </button>
+
+        </div>
+    )
+}
diff --git a/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
index 7dc863c..3b32321 100644
--- a/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/Components/StoryPageContent/StoryPageContent.tsx
@@ -30,7 +30,7 @@ export default function StoryPageContent({ story }: Props) {
 
                 {story.cover_image &&
                     <img src={story.cover_image}
-                        className='w-full h-[120px] md:h-[240px] object-cover rounded-12 mb-16'
+                        className='w-full object-cover rounded-12 md:rounded-16 mb-16'
                         alt="" />}
                 <div className="flex flex-col gap-24 relative">
                     {curUser?.id === story.author.id && <Menu
diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.skeleton.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.skeleton.tsx
new file mode 100644
index 0000000..e346ec3
--- /dev/null
+++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.skeleton.tsx
@@ -0,0 +1,57 @@
+
+import { Helmet } from 'react-helmet'
+import { useParams } from 'react-router-dom'
+import LoadingPage from 'src/Components/LoadingPage/LoadingPage'
+import NotFoundPage from 'src/features/Shared/pages/NotFoundPage/NotFoundPage'
+import { usePostDetailsQuery } from 'src/graphql'
+import { capitalize } from 'src/utils/helperFunctions'
+import { useAppSelector, } from 'src/utils/hooks'
+import { PostCardSkeleton } from '../../Components/PostCard'
+import TrendingCard from '../../Components/TrendingCard/TrendingCard'
+import AuthorCard from './Components/AuthorCard/AuthorCard'
+import AuthorCardSkeleton from './Components/AuthorCard/AuthorCard.skeleton'
+import PageContent from './Components/PageContent/PageContent'
+import PageContentSkeleton from './Components/PageContent/PageContent.skeleton'
+import PostActions from './Components/PostActions/PostActions'
+import PostActionsSkeleton from './Components/PostActions/PostActions.skeleton'
+import styles from './styles.module.scss'
+
+
+export default function PostDetailsPageSkeleton() {
+
+
+    const { navHeight } = useAppSelector((state) => ({
+        navHeight: state.ui.navHeight
+    }));
+
+    return (
+
+        <div
+            className={`page-container grid pt-16 w-full gap-32 ${styles.grid}`}
+        >
+            <aside id='actions' className='no-scrollbar'>
+                <div className="sticky"
+                    style={{
+                        top: `${navHeight + 16}px`,
+                        maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
+                    }}>
+                    <PostActionsSkeleton />
+                </div>
+            </aside>
+
+
+            <PageContentSkeleton />
+            <aside id='author' className='no-scrollbar min-w-0'>
+                <div className="flex flex-col gap-24"
+                    style={{
+                        top: `${navHeight + 16}px`,
+                        maxHeight: `calc(100vh - ${navHeight}px - 16px)`,
+                        overflowY: "scroll",
+                    }}>
+                    <AuthorCardSkeleton />
+                    <TrendingCard />
+                </div>
+            </aside>
+        </div>
+    )
+}
diff --git a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
index 2bfd33a..7ff3955 100644
--- a/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
+++ b/src/features/Posts/pages/PostDetailsPage/PostDetailsPage.tsx
@@ -6,10 +6,12 @@ import NotFoundPage from 'src/features/Shared/pages/NotFoundPage/NotFoundPage'
 import { usePostDetailsQuery } from 'src/graphql'
 import { capitalize } from 'src/utils/helperFunctions'
 import { useAppSelector, } from 'src/utils/hooks'
+import ScrollToTop from 'src/utils/routing/scrollToTop'
 import TrendingCard from '../../Components/TrendingCard/TrendingCard'
 import AuthorCard from './Components/AuthorCard/AuthorCard'
 import PageContent from './Components/PageContent/PageContent'
 import PostActions from './Components/PostActions/PostActions'
+import PostDetailsPageSkeleton from './PostDetailsPage.skeleton'
 import styles from './styles.module.scss'
 
 
@@ -31,7 +33,7 @@ export default function PostDetailsPage() {
     }));
 
     if (postDetailsQuery.loading)
-        return <LoadingPage />
+        return <PostDetailsPageSkeleton />
 
     const post = postDetailsQuery.data?.getPostById;
 
@@ -44,6 +46,7 @@ export default function PostDetailsPage() {
                 <title>{post.title}</title>
                 <meta property="og:title" content={post.title} />
             </Helmet>
+            <ScrollToTop />
             <div
                 className={`page-container grid pt-16 w-full gap-32 ${styles.grid}`}
             >
diff --git a/src/features/Posts/pages/PostDetailsPage/styles.module.scss b/src/features/Posts/pages/PostDetailsPage/styles.module.scss
index af7241e..956b04e 100644
--- a/src/features/Posts/pages/PostDetailsPage/styles.module.scss
+++ b/src/features/Posts/pages/PostDetailsPage/styles.module.scss
@@ -39,7 +39,7 @@
   }
 
   @include gt-lg {
-    grid-template-columns: auto 1fr calc(min(30%, 326px));
+    grid-template-columns: 116px 1fr calc(min(30%, 326px));
     grid-template-areas:
       "actions content author"
       ". comments ."
diff --git a/src/utils/routing/FallbackProvider.tsx b/src/utils/routing/FallbackProvider.tsx
new file mode 100644
index 0000000..80c25fb
--- /dev/null
+++ b/src/utils/routing/FallbackProvider.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import LoadingPage from 'src/Components/LoadingPage/LoadingPage';
+
+export type FallbackType = NonNullable<React.ReactNode> | null;
+
+export interface FallbackContextType {
+    updateFallback: (fallback: FallbackType) => void;
+}
+
+export const FallbackContext = React.createContext<FallbackContextType>({
+    updateFallback: () => { },
+});
+
+interface FabllbackProviderProps {
+}
+
+export const FallbackProvider: React.FC<React.PropsWithChildren<FabllbackProviderProps>> = ({
+    children,
+}) => {
+    const [fallback, setFallback] = React.useState<FallbackType>(null);
+
+    const updateFallback = React.useCallback((fallback: FallbackType) => {
+        setFallback(() => <>
+            <LoadingPage />
+            {fallback}
+        </>);
+    }, []);
+
+    const renderChildren = React.useMemo(() => {
+        return children;
+    }, [children]);
+
+    return (
+        <FallbackContext.Provider value={{ updateFallback }}>
+            <React.Suspense fallback={fallback}>{renderChildren}</React.Suspense>
+        </FallbackContext.Provider>
+    );
+};
\ No newline at end of file
diff --git a/src/utils/routing/Page.tsx b/src/utils/routing/Page.tsx
new file mode 100644
index 0000000..cce2990
--- /dev/null
+++ b/src/utils/routing/Page.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { usePage } from './usePage';
+
+interface LoadablePagePageProps { }
+
+const LoadablePage: React.FC<React.PropsWithChildren<LoadablePagePageProps>> = ({ children }) => {
+    const { onLoad } = usePage();
+
+    const render = React.useMemo(() => {
+        return <>{children}</>;
+    }, [children]);
+
+    React.useEffect(() => {
+        onLoad(render);
+    }, [onLoad, render]);
+
+
+    return render;
+};
+
+export default LoadablePage;
\ No newline at end of file
diff --git a/src/utils/routing/layouts/NavbarLayout.tsx b/src/utils/routing/layouts/NavbarLayout.tsx
index cc63068..ec5c8f2 100644
--- a/src/utils/routing/layouts/NavbarLayout.tsx
+++ b/src/utils/routing/layouts/NavbarLayout.tsx
@@ -1,9 +1,12 @@
 import { Outlet, } from 'react-router-dom';
 import Navbar from "src/Components/Navbar/Navbar";
+import { FallbackProvider } from '../FallbackProvider';
 
 export const NavbarLayout = () => {
     return <>
         <Navbar />
-        <Outlet />
+        <FallbackProvider>
+            <Outlet />
+        </FallbackProvider>
     </>
 };
diff --git a/src/utils/routing/loadable.tsx b/src/utils/routing/loadable.tsx
index d8eabce..b2130fb 100644
--- a/src/utils/routing/loadable.tsx
+++ b/src/utils/routing/loadable.tsx
@@ -1,8 +1,8 @@
-import { Suspense } from "react";
 import LoadingPage from "src/Components/LoadingPage/LoadingPage";
+import LoadablePage from "./Page";
 
 export const Loadable = (Component: any, Loading = LoadingPage) => (props: any) => (
-    <Suspense fallback={<Loading />}>
+    <LoadablePage>
         <Component {...props} />
-    </Suspense>
+    </LoadablePage>
 );
diff --git a/src/utils/routing/scrollToTop.tsx b/src/utils/routing/scrollToTop.tsx
new file mode 100644
index 0000000..01d0b58
--- /dev/null
+++ b/src/utils/routing/scrollToTop.tsx
@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+export default function ScrollToTop() {
+    const { pathname } = useLocation();
+
+    useEffect(() => {
+        window.scrollTo(0, 0);
+    }, [pathname]);
+
+    return null;
+}
\ No newline at end of file
diff --git a/src/utils/routing/usePage.ts b/src/utils/routing/usePage.ts
new file mode 100644
index 0000000..570d106
--- /dev/null
+++ b/src/utils/routing/usePage.ts
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { FallbackContext, FallbackType } from './FallbackProvider';
+
+export const usePage = () => {
+    const { updateFallback } = React.useContext(FallbackContext);
+
+    const onLoad = React.useCallback(
+        (component: FallbackType | undefined) => {
+            if (component === undefined) component = null;
+            updateFallback(component);
+        },
+        [updateFallback]
+    );
+
+    return { onLoad };
+};
\ No newline at end of file