Merge pull request #593 from Utsavladia/code-skeleton

Added skeleton laoder for code page
VaibhavArora314 · Aug 10, 2024 · 7c518a5 · 7c518a5
2 parents 1fbd78b + 04bc802
commit 7c518a5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/frontend/src/components/CodeSkeleton.tsx b/frontend/src/components/CodeSkeleton.tsx
@@ -0,0 +1,26 @@
+
+const SkeletonLoader = () => {
+    return (
+        <div className="flex justify-center items-center min-h-screen bg-gray-100 dark:bg-gray-900">
+            <div className="w-[90vw] mt-24 h-[90vh] bg-gray-200 dark:bg-gray-800 p-8 border border-gray-300 dark:border-gray-700 rounded-lg shadow-lg">
+                <div className="animate-pulse">
+                    <div className="h-4 bg-gray-300 w-1/3 dark:bg-gray-600 mb-4 rounded"></div>
+                    <div className="space-y-4">
+                        <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-2/3"></div>
+                        <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
+                        <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6"></div>
+                        <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/5"></div>
+                        <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/5"></div>
+                        <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-1/3"></div>
+                        <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4"></div>
+                        <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6"></div>
+                        <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-2/3"></div>
+                        <div className="h-4 bg-gray-300 dark:bg-gray-600 rounded w-4/5"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default SkeletonLoader;
diff --git a/frontend/src/pages/Post.tsx b/frontend/src/pages/Post.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import axios, { AxiosError } from "axios";
-import Loader from "../components/Loader";
 import toast from "react-hot-toast";
 import Comment from "./Comment";
 import { MdFavorite } from "react-icons/md";
@@ -20,6 +19,7 @@ import { tokenState, userState } from "../store/atoms/auth";
 import { useRecoilValue } from "recoil";
 import { RiUserFollowFill } from "react-icons/ri";
 import { RiUserUnfollowFill } from "react-icons/ri";
+import CodeSkeletonLoader from "../components/CodeSkeleton";
 
 const Post = () => {
   const { id } = useParams<{ id: string }>();
@@ -173,7 +173,7 @@ const Post = () => {
   };
 
   if (loading) {
-    return <Loader />;
+    return <CodeSkeletonLoader />;
   }
 
   if (error) {