diff --git a/src/components/app/posts-list/skeleton.tsx b/src/components/app/posts-list/skeleton.tsx
index 5311e4b..c4a9061 100644
--- a/src/components/app/posts-list/skeleton.tsx
+++ b/src/components/app/posts-list/skeleton.tsx
@@ -1,19 +1,20 @@
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useMemo } from "react";
 
 export const PostsListSkeleton: React.FC = () => {
-  return (
-    <div className="flex w-full flex-col space-y-3">
-      {Array.from({ length: 10 }, (_, i) => (
-        //   using index as key is usually anti-pattern
-        //   but this array does not change so it should be okay
-        <div className="space-y-2" key={i}>
-          <Skeleton className="h-3 w-1/2 rounded-xl" />
-          <Skeleton className="h-6 w-3/4" />
-          <Skeleton className="h-4 w-full" />
-          <Separator />
-        </div>
-      ))}
-    </div>
-  );
+  const skeletonItems = useMemo(() => {
+    return Array.from({ length: 10 }, (_, i) => (
+      //   using index as key is usually anti-pattern
+      //   but this array does not change so it should be okay.
+      <div className="space-y-2" key={i}>
+        <Skeleton className="h-3 w-1/2 rounded-xl" />
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Separator />
+      </div>
+    ));
+  }, []);
+
+  return <div className="flex w-full flex-col space-y-3">{skeletonItems}</div>;
 };
diff --git a/src/components/app/posts-table/skeleton.tsx b/src/components/app/posts-table/skeleton.tsx
index d6aa148..d6c2802 100644
--- a/src/components/app/posts-table/skeleton.tsx
+++ b/src/components/app/posts-table/skeleton.tsx
@@ -1,21 +1,24 @@
 import { Separator } from "@/components/ui/separator";
 import { Skeleton } from "@/components/ui/skeleton";
+import { useMemo } from "react";
 
 export const PostsTableSkeleton: React.FC = () => {
-  return (
-    <div className="flex w-full flex-col space-y-3">
-      {Array.from({ length: 10 }, (_, i) => (
-        //   using index as key is usually anti-pattern
-        //   but this array does not change so it should be okay
-        <div className="space-y-2" key={i}>
-          <Skeleton className="h-3 w-1/2 rounded-xl" />
-          <Skeleton className="h-6 w-3/4" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-full" />
-          <Skeleton className="h-4 w-full" />
-          <Separator />
-        </div>
-      ))}
-    </div>
-  );
+  const skeletonItems = useMemo(() => {
+    return Array.from({ length: 10 }, (_, i) => (
+      //   Using index as key is usually anti-pattern
+      //   but this array does not change so it should be okay.
+      <div className="space-y-2" key={i}>
+        <Skeleton className="h-3 w-1/2 rounded-xl" />
+        <Skeleton className="h-6 w-3/4" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-full" />
+        <Skeleton className="h-4 w-full" />
+        <Separator />
+      </div>
+    ));
+  }, []);
+
+  return <div className="flex w-full flex-col space-y-3">{skeletonItems}</div>;
 };
+
+export default PostsTableSkeleton;