loading handling My Posts page and Header

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

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>

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

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,22 +36,32 @@ 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
                 comments, please login.
               </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 />