feat: skeleton for posts (#220)

* feat: skeleton for posts

* refactor: added requested change

Author: Girishbari

src/components/core/createPost/index.tsx

@@ -250,7 +250,7 @@ const CreatePost = () => {
             </article>
           </div>
         </form>
-      </motion.section>
+      </motion.section >
     </>
   );
 };

src/components/core/posts/index.tsx

@@ -8,6 +8,8 @@ import { addLikesToAPost } from "@/redux/reducers/postsReducer";
 
 import { PostInstanceType } from "@/types/index.d";
 
+import PostSkeleton from "../../pages/feed/loading"
+
 // Api
 // import { getAllPosts, likeTweet } from "@/backend/posts.api";
 // import { getBookmarks } from "@/backend/bookmarks.api";
@@ -53,7 +55,7 @@ export default function Posts() {
   }
 
   if (postState.loading) {
-    return <h1 className="text-white text-2xl text-center">Loading...</h1>;
+    return <h1 className="text-white text-2xl text-center"><PostSkeleton /></h1>;
   }
 
   if (postState.error) {
@@ -62,6 +64,7 @@ export default function Posts() {
 
   return (
     <>
+      {!copyPosts && <PostSkeleton />}
       {copyPosts &&
         copyPosts.length > 0 &&
         copyPosts.map((post: PostInstanceType, index: number) => (

src/components/pages/feed/loading.tsx

@@ -0,0 +1,60 @@
+export default function PostSkeleton({ width }: { width?: string }) {
+  return (
+    <>
+      <div className=" shadow dark:shadow-gray-600 mb-4 rounded-md">
+        <div className="flex animate-pulse p-3">
+
+
+          <div className="flex-shrink-0">
+            <span className="w-12 h-12 block bg-gray-200 rounded-full dark:bg-gray-700"></span>
+          </div>
+
+          <div className="ms-4 mt-2 w-full">
+            <h3 className="h-4 bg-gray-200 rounded-full dark:bg-gray-700 w-[40%]"></h3>
+
+            <ul className="mt-5 space-y-3">
+              <li className="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
+              <li className="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className=" shadow dark:shadow-gray-600 mb-4 rounded-md">
+        <div className="flex animate-pulse p-3">
+
+
+          <div className="flex-shrink-0">
+            <span className="w-12 h-12 block bg-gray-200 rounded-full dark:bg-gray-700"></span>
+          </div>
+
+          <div className="ms-4 mt-2 w-full">
+            <h3 className="h-4 bg-gray-200 rounded-full dark:bg-gray-700 w-[40%]"></h3>
+
+            <ul className="mt-5 space-y-3">
+              <li className="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
+              <li className="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div className=" shadow dark:shadow-gray-600 mb-4 rounded-md">
+        <div className="flex animate-pulse p-3">
+
+
+          <div className="flex-shrink-0">
+            <span className="w-12 h-12 block bg-gray-200 rounded-full dark:bg-gray-700"></span>
+          </div>
+
+          <div className="ms-4 mt-2 w-full">
+            <h3 className="h-4 bg-gray-200 rounded-full dark:bg-gray-700 w-[40%]"></h3>
+
+            <ul className="mt-5 space-y-3">
+              <li className="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
+              <li className="w-full h-4 bg-gray-200 rounded-full dark:bg-gray-700"></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/pages/user/userPosts/index.tsx

@@ -31,7 +31,6 @@ export default function UserPosts({ userId, userName }: UserPostsProps) {
     try {
       const response = await removePost(id);
       if (response) {
-        console.log(response);
         dispatch(removeUserPost(response.$id));
         toastify("Post deleted sucessfully", "success");
       }

src/redux/reducers/postsReducer.ts

@@ -2,17 +2,19 @@
 import { createSlice } from "@reduxjs/toolkit";
 import type { PayloadAction } from "@reduxjs/toolkit";
 import { PostInstanceType, PostInitStateType } from "@/types/index.d";
-import { ACTION } from "next/dist/client/components/app-router-headers";
+
+
 
 const initialState: PostInitStateType = {
   posts: [],
   error: false,
-  loading: false,
+  loading: true,
 };
 
 export const postsReducer = createSlice({
   name: "posts",
   initialState: initialState,
+
   reducers: {
     getPosts: (state, action: PayloadAction<any>) => {
       state.loading = true;