From 0566670286608e44ae2245558b04b6fda4b1b51a Mon Sep 17 00:00:00 2001
From: amirfakhrullah <amirfakhrullah96@gmail.com>
Date: Sat, 18 Jun 2022 00:41:30 +0800
Subject: [PATCH] loading handling My Posts page and Header

---
 src/components/Header.tsx                    |  4 +--
 src/components/loaders/TagsLeftNavLoader.tsx |  2 +-
 src/pages/index.tsx                          |  3 --
 src/pages/posts/index.tsx                    | 32 ++++++++++++--------
 4 files changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2e6855a..b36f58f 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -7,7 +7,7 @@ import Image from "next/image";
 const Header: React.FC<{
   displayButtons?: boolean;
 }> = ({ displayButtons = true }) => {
-  const { data: session } = useSession();
+  const { data: session, status } = useSession();
   const router = useRouter();
 
   return (
@@ -18,7 +18,7 @@ const Header: React.FC<{
             BloqDown
           </h1>
         </Link>
-        {displayButtons && (
+        {displayButtons && status !== "loading" && (
           <div className="flex flex-row items-center pl-1">
             {session && session.user ? (
               <div className="md:flex hidden flex-row items-center">
diff --git a/src/components/loaders/TagsLeftNavLoader.tsx b/src/components/loaders/TagsLeftNavLoader.tsx
index aa3ec19..9cfd3c6 100644
--- a/src/components/loaders/TagsLeftNavLoader.tsx
+++ b/src/components/loaders/TagsLeftNavLoader.tsx
@@ -10,7 +10,7 @@ const TagsLeftNavLoader = () => {
         >
           <div className="h-3 w-3 bg-gray-700 rounded-sm" />
 
-          <div className="ml-2 h-3 flex-1 bg-gray-700 rounded-sm" />
+          <div className="ml-2 h-4 flex-1 bg-gray-700 rounded-sm" />
         </div>
       ))}
     </div>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 37ddaad..f74ca12 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,4 +1,3 @@
-import Loader from "../components/loaders/Loader";
 import MetaHead from "../components/MetaHead";
 import PostForm from "../components/PostForm";
 import PostCard from "../components/PostCard";
@@ -32,8 +31,6 @@ const Home: React.FC = () => {
 
   const { filterBoolean, handleTag } = useFilterTags();
 
-  // if (isLoading) return <Loader />;
-
   return (
     <>
       <MetaHead title="BloqDown" />
diff --git a/src/pages/posts/index.tsx b/src/pages/posts/index.tsx
index 50d1fbe..c5b415f 100644
--- a/src/pages/posts/index.tsx
+++ b/src/pages/posts/index.tsx
@@ -2,7 +2,7 @@ import { useSession } from "next-auth/react";
 import React from "react";
 import Container from "../../components/Container";
 import Header from "../../components/Header";
-import Loader from "../../components/loaders/Loader";
+import PostCardLoader from "../../components/loaders/PostCardLoader";
 import MetaHead from "../../components/MetaHead";
 import PostButton from "../../components/PostButton";
 import PostCard from "../../components/PostCard";
@@ -17,9 +17,7 @@ const MyPosts: React.FC = () => {
   const { open, setOpen } = useFormModal();
   const { data: posts, isLoading } = trpc.useQuery(["post.get-my-posts"]);
 
-  const { data: session } = useSession();
-
-  if (isLoading) return <Loader />;
+  const { data: session, status } = useSession();
 
   return (
     <>
@@ -38,7 +36,7 @@ const MyPosts: React.FC = () => {
 
             <h1 className="mt-5 text-2xl font-black text-gray-300">My Posts</h1>
 
-            {!session && (
+            {status !== "loading" && !session && (
               <p className="text-sm my-1">
                 If you post as anonymous, your post might not appear here
                 because of cookie changed. To get full control of your posts and
@@ -46,14 +44,24 @@ const MyPosts: React.FC = () => {
               </p>
             )}
 
-            {posts?.length === 0 && (
-              <h3 className="text-center font-bold text-lg text-gray-500 my-10">
-                No Post Yet
-              </h3>
+            {isLoading ? (
+              <PostCardLoader />
+            ) : (
+              <>
+                {posts?.length === 0 && (
+                  <h3 className="text-center font-bold text-lg text-gray-500 my-10">
+                    No Post Yet
+                  </h3>
+                )}
+                {posts?.map((post) => (
+                  <PostCard
+                    key={post.id}
+                    {...(post as GetPostType)}
+                    page="myPage"
+                  />
+                ))}
+              </>
             )}
-            {posts?.map((post) => (
-              <PostCard key={post.id} {...(post as GetPostType)} page="myPage" />
-            ))}
           </div>
 
           <RightNav />